<template>
  <basic-container class="app-container work-order-page">
    <div class="tablist">
      <span class="name" v-for="(item,index) in initTags" :class="item.name == currType ? 'active' : ''" @click="handleTabs(item)" :key="index">{{item.name}}</span>
    </div>
    <div class="workorder">
      <!-- 催单工单 -->
      <div v-if="this.tagViewCount['催单工单'] > 0" v-show="currType == '催单工单'">
        <reminder ref="reminder" :cityList="cityList"></reminder>
      </div>
      <!-- 备款 -->
      <div v-if="this.tagViewCount['备款工单'] > 0" v-show="currType == '备款工单'">
        <el-dialog title="备款工单" :visible.sync="showComplaintEdit" width="50%">
          <div v-if="damagedialogStatus=='update'">
            <el-form ref="damageformEdit" :rules="damageformrules" :model="damageformEdit" label-width="100px">
              <el-form-item label="创建工单时间">
                <span>{{damageformEdit.createTime}}</span>
              </el-form-item>
              <el-form-item label="蛋糕去向">
                <el-select v-model="damageformEdit.cakeWhereaboutsName" v-if="damageStatus==='update'" placeholder="请选择部门" size="small" style="width: 120px;">
                  <el-option :label="item.dictValue" :value="item.dictValue" v-for="item in cakewherelist" :key="item.id"></el-option>
                </el-select>
                <span v-if="damageStatus==='create'">{{damageformEdit.cakeWhereaboutsName}}</span>
              </el-form-item>
              <el-form-item label="责任部门">
                <el-select v-model="damageformPersonName" v-if="damageStatus==='update'" placeholder="请选择责任部门" @change="getdamageformPersonDept">
                  <el-option :label="item.dictValue" :value="{label:item.dictValue,value:item.dictKey}" v-for="item in departmentList" :key="item.id"></el-option>
                </el-select>
                <span v-if="damageStatus==='create'">{{damageformEdit.personDeptName}}</span>
              </el-form-item>
              <el-form-item label="申请人">
                <span>{{damageformEdit.operator}}</span>
              </el-form-item>
              <el-form-item label="责任人" required>
                <el-input v-model.trim="damageformEdit.personLiable" v-if="damageStatus==='update'" class="inputType" size="small" type="textarea" maxlength="10" show-word-limit></el-input>
                <span v-if="damageStatus==='create'">{{damageformEdit.personLiable}}</span>
              </el-form-item>
              <el-form-item label="备款内容" required>
                <el-input v-model.trim="damageformEdit.provisionsContent" type="textarea" maxlength="50" show-word-limit :autosize="{ minRows: 6, maxRows:8}" size="small" v-if="damageStatus==='update'"></el-input>
                <p v-if="damageStatus==='create'" class="processingResults">{{damageformEdit.provisionsContent}}</p>
              </el-form-item>
              <el-form-item label="抵用单号" v-if="damageStatus==='update'">
                <el-input v-model="damageformEdit.offsetNo" size="small" type="number" :disabled="true" v-if="damageformEdit.provisionsStatus==1"></el-input>
                <el-input v-model.trim="damageformEdit.offsetNo" size="small" type="number" v-else maxlength="24" onkeyup="value=value.replace(/[^\d]|^[0]/g,'').slice(0,24)" required></el-input>
              </el-form-item>
              <el-form-item label="抵用单号" v-if="damageformEdit.provisionsStatus==1&&damageStatus==='create'">
                <span>{{damageformEdit.offsetNo}}</span>
              </el-form-item>
              <div class="buttontips">
                <el-button type="primary" size="small" plain @click="handlerEditdamage(damageformEdit)" v-if="damageShow">编辑</el-button>
                <el-button type="success" size="small" plain @click="handlerSavedamage(damageformEdit,'damageformEdit')" v-if="damageEditShow">保存</el-button>
                <!-- <el-button
                  type="warning"
                  size="small"
                  plain
                  @click="handlerdamageCancel(damageformEdit,'damageformEdit')"
                  v-if="damageEditShow"
                >取消</el-button> -->
                <!-- <el-button type="success" size="small" plain @click="handlerSavedamages(damageformEdit)" v-if="damageStatus==='create'">保存</el-button> -->

                <el-button type="info" size="small" plain @click="handlerLogdamage(damageformEdit)" v-if="Logdamageshow">日志</el-button>
              </div>
            </el-form>
          </div>
        </el-dialog>
        <div class="filter_container">
          <el-form :inline="true" :model="damagedform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select v-model="deptNamedamag" placeholder="请选择城市" size="small" style="width: 100px;" @change="handleCitydamag" ref="deptNameRef" @keydown.native="selectBlur($event)">
                <el-option v-for="(house,citykey) in cityList" :key="citykey" :label="house.deptName" :value="{value:house.id,label:house.deptName}"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input v-model.trim="damagedform.xmbzNo" size="small" style="width: 160px" @keyup.enter.native="handleFilterReserve(Launchdate2)" clearable placeholder="请输入后台单号"></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input v-model.trim="damagedform.operator" size="small" style="width: 130px" @keyup.enter.native="handleFilterReserve(Launchdate2)" clearable placeholder="请输入申请人"></el-input>
            </el-form-item>
            <el-form-item label="责任部门">
              <el-select v-model="damagedform.personDept" clearable placeholder="请选择部门" size="small" style="width: 120px;" ref="damagedformRef" @keydown.native="selectBlur($event)">
                <el-option :label="item.dictValue" :value="item.dictKey" v-for="item in departmentList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="责任人">
              <el-input v-model.trim="damagedform.personLiable" size="small" style="width: 130px" @keyup.enter.native="handleFilterReserve(Launchdate2)" clearable placeholder="请输入责任人"></el-input>
            </el-form-item>

            <el-form-item label="备款状态">
              <el-select ref="provisionsStatusRef" v-model="damagedform.provisionsStatus" placeholder="请选择备款状态" clearable size="small" style="width: 140px;" @keydown.native="selectBlur($event)">
                <el-option :label="item.dictValue" :value="item.id" v-for="item in provisionsOperationList" :key="item.dictKey"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <el-date-picker v-model="Launchdate2" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :clearable="false" align="right" size="small"></el-date-picker>
            </el-form-item>
            <el-form-item label="蛋糕去向">
              <el-select ref="cakeWhereaboutsRef" v-model="damagedform.cakeWhereabouts" placeholder="请选择蛋糕去向" clearable size="small" style="width: 180px;" @keydown.native="selectBlur($event)">
                <el-option :label="item.dictValue" :value="item.dictKey" v-for="item in cakewherelist" :key="item.dictKey"></el-option>
              </el-select>
            </el-form-item>
            <!-- provisionsOperationList -->
            <el-form-item>
              <el-button type="primary" plain @click="handleFilterReserve(Launchdate2)" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="damagedList" border style="width: 100%" header-row-class-name="header-row-class-name" cell-class-name="table-cell-class-name">
          <el-table-column prop="cityName" label="城市" width="80" align="center"> </el-table-column>
          <el-table-column prop="branchWarehouse" label="分仓" width="80" align="center"> </el-table-column>
          <el-table-column prop="xmbzNo" label="后台单号" width="80" align="center"> </el-table-column>
          <el-table-column prop='goodsName' label="蛋糕款式" width="180" align="center"></el-table-column>
          <el-table-column prop="provisionsContent" label="备款内容" width="100" align="center"> </el-table-column>
          <el-table-column prop="operator" label="申请人" width="80" align="center"> </el-table-column>
          <el-table-column prop="createTime" label="创建工单时间" width="180" align="center"> </el-table-column>
          <el-table-column prop="cakeWhereaboutsName" label="蛋糕去向" width="80" align="center"> </el-table-column>
          <el-table-column prop="personLiable" label="责任人" width="80" align="center"></el-table-column>
          <el-table-column prop="personDeptName" label="责任部门" width="80" align="center"> </el-table-column>
          <el-table-column prop="offsetNo" label="抵用单号" width="180" align="center"> </el-table-column>
          <el-table-column prop="offsetTime" label="抵用时间" width="180" align="center"> </el-table-column>
          <el-table-column label="操作" width="120" fixed='right' align="center">
            <template slot-scope="scope">
              <el-button size="mini" plain @click="headReserveDetils(scope.row,'damageformEdit')" style="margin-left: 0;padding: 7px;margin-bottom: 2px;margin-right: 2px;">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="damagetotal>0" :total="damagetotal" :page.sync="damagedform.page" :limit.sync="damagedform.size" @pagination="getReserveOrderList" />
      </div>

      <!-- 投诉 -->
      <div v-if="this.tagViewCount['投诉工单'] > 0" v-show="currType == '投诉工单'">
        <complaint ref="complaint" :cityList="cityList" :errorTypeList="options" :dealstatusList="dealstatusList"></complaint>
      </div>

      <!-- 问题工单 -->
      <div v-if="this.tagViewCount['问题工单'] > 0" v-show="currType == '问题工单'">
        <problem ref="problem" :cityList="cityList" :errorTypeList="options" :dealstatusList="dealstatusList"></problem>
      </div>

      <!-- 异常工单 -->
      <div v-if="this.tagViewCount['异常工单'] > 0" v-show="currType == '异常工单'">
        <div class="filter_container">
          <el-form :inline="true" :model="abnormalFrom" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select v-model="deptNameabnormal" placeholder="请选择城市" size="small" style="width: 100px;" @change="handleCityabnormal" ref="deptNameRef" @keydown.native="selectBlur($event)">
                <el-option v-for="(house,citykey) in cityList" :key="citykey" :label="house.deptName" :value="{value:house.id,label:house.deptName}"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input v-model.trim="abnormalFrom.xmbzNo" size="small" style="width: 160px" @keyup.enter.native="handleFilterabnormal(Launchdate5)" clearable placeholder="请输入后台单号"></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input v-model.trim="abnormalFrom.platformNo" size="small" style="width: 140px" @keyup.enter.native="handleFilterabnormal(Launchdate5)" clearable placeholder="请输入平台单号"></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input v-model.trim="abnormalFrom.operator" size="small" style="width: 130px" @keyup.enter.native="handleFilterabnormal(Launchdate5)" clearable placeholder="请输入申请人"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model.number="abnormalFrom.phone" size="small" onkeyup="value=value.replace(/[^\-?\d.]/g,'')" maxlength="11" onafterpaste="value=value.replace(/[^\-?\d.]/g,'')" style="width: 140px" clearable @keyup.enter.native="handleFilterabnormal(Launchdate5)" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="处理状态">
              <el-select v-model="abnormalFrom.handleState" clearable placeholder="请选择处理状态" size="small" style="width: 150px;" ref="handleStateRef" @keydown.native="selectBlur($event)">
                <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item,index) in dealstatusList" :key="index" size="small"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="投诉内容">
              <el-select v-model="abnormalFrom.complaints" clearable placeholder="请选择投诉内容" size="small" style="width: 150px;">
                <el-option :label="item.label" :value="item.value" v-for="(item,index) in complaintsList" :key="index" size="small"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="部门失误类型">
              <ele-multi-cascader clearable v-model="abnormalError" :options="options" :inputValue="configTips" separator=">" placeholder="请选择部门失误类型" style="width: 280px;"></ele-multi-cascader>
            </el-form-item>

            <el-form-item label="创建工单时间">
              <el-date-picker v-model="Launchdate5" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :clearable="false" align="right"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="handleFilterabnormal(Launchdate5)" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table :data="abnormalList" border style="width: 100%" header-row-class-name="header-row-class-name" cell-class-name="table-cell-class-name"  :key="currType">
            <el-table-column prop="complaintLevelName" label="等级" width="100" align="center">
              <template slot-scope="scope">
                <el-tag :type="getcomplaintLevelClass(scope.row.complaintLevel )">{{scope.row.complaintLevelName}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建工单时间" width="180" align="center"> </el-table-column>
            <el-table-column prop="handleStateName" label="处理状态" width="180" align="center"> </el-table-column>
            <el-table-column prop="phone" label="手机号" width="180" align="center"></el-table-column>
            <el-table-column prop="cityName" label="城市" width="80" align="center"> </el-table-column>
            <el-table-column prop="platformNo" label="平台单号" width="100" align="center"> </el-table-column>
            <el-table-column prop="xmbzNo" label="后台单号" width="80" align="center"></el-table-column>
            <el-table-column prop='orderDetailCakes[0].goodsName' label="蛋糕名称" width="100" align="center"></el-table-column>
            <el-table-column prop="abnormalContent" label="投诉内容" width="100" align="center"> </el-table-column>
            <el-table-column prop="endTime" label="结案时间" width="180" align="center"> </el-table-column>
            <el-table-column prop='responsibleDepartmentName' label="责任部门" width="250" align="center"> </el-table-column>
            <el-table-column prop='responsibleDepartmentErrorText' label="部门失误类型" width="250" align="center"> </el-table-column>
            <el-table-column label='图片附图' width="300" align="center" :key="1">
              <template slot-scope="scope">
                <div class="photoWallboard">
                  <img :src="item" v-for="(item,index) in changeExtJsonProblem(scope.row.extJson)" :key="index" class="showExplain" @click="handBigPhoto(item)">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="processingResults" label="处理结果" width="180" align="center"></el-table-column>
            <el-table-column prop="operator" label="申请人" width="80" align="center"> </el-table-column>
            <el-table-column prop="personLiable" label="责任人" width="80" align="center"> </el-table-column>
            <el-table-column prop="orderChannel" label="订单渠道" width="80" align="center"> </el-table-column>
            <el-table-column prop="abnormalChannelName" label="异常渠道" width="180" align="center"> </el-table-column>

            <el-table-column prop="offsetTime" label="操作" width="120" fixed='right' align="center">
              <template slot-scope="scope">
                <el-button size="mini" plain @click="headleAbnormaldetils(scope.row,'abnormalEdit')" style="margin-left: 0;padding: 7px;margin-bottom: 2px;margin-right: 2px;">查看</el-button>
                <el-button size="mini" plain @click="changeAbnormalEdit(scope.row, 'abnormalEdit')" style="margin-left: 0;padding: 7px;margin-bottom: 2px;margin-right: 2px;">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination v-show="total>0" :total="total" :page.sync="abnormalFrom.page" :limit.sync="abnormalFrom.size" @pagination="getabnormalList" />
        <!-- 弹出框 -->
        <el-dialog title="异常工单" :visible.sync="showComplaintEdit" width="50%">
          <div v-if="abnormalStatus=='update'">
            <el-form ref="abnormalEdit" :model="abnormalEdit" :rules="abnormalEditrules" label-width="100px">
              <el-form-item label="后台单号">
                <span v-if="abnormalEdit.xmbzNo">{{abnormalEdit.xmbzNo}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="平台单号">
                <span v-if="abnormalEdit.platformNo">{{abnormalEdit.platformNo}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="创建工单时间">
                <span>{{abnormalEdit.createTime}}</span>
              </el-form-item>
              <el-form-item label="部门失误类型">
                <div v-if="abnorStatus=='update'">
                  <!-- 异常订单 -->
                  <ele-multi-cascader clearable v-model="exceptionEditing" :options="options" :inputValue="configTips" separator=">" placeholder="请选择部门失误类型" style="width: 280px;"></ele-multi-cascader>
                </div>
                <span v-if="abnorStatus=='create'"> {{abnormalEdit.responsibleDepartmentErrorText}} </span>
              </el-form-item>
              <el-form-item label="投诉等级">
                <el-select v-model="abnormalEdit.complaintLevel" placeholder="请选择投诉等级" v-if="abnorStatus=='update'" size="small">
                  <el-option v-for="item in ComplaintLevelList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" size="small"></el-option>
                </el-select>
                <span v-if="abnorStatus=='create'">{{abnormalEdit.complaintLevelName}}</span>
              </el-form-item>
              <el-form-item label="处理状态">
                <el-select v-model="abnormalEdit.handleState" placeholder="请选择处理状态" v-if="abnorStatus=='update'" size="small" disabled>
                  <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item,index) in dealstatusList" :key="index" size="small"></el-option>
                </el-select>
                <span v-if="abnorStatus=='create'">{{abnormalEdit.handleStateName}}</span>
              </el-form-item>
              <div class="lows">
                <el-form-item label="异常渠道">
                  <el-select v-model="abnormalEdit.abnormalChannelName" placeholder="请选择异常渠道" v-if="abnorStatus=='update'" size="small">
                    <el-option v-for="item in abnormalChannelList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" size="small"></el-option>
                  </el-select>
                  <span v-if="abnorStatus=='create'">{{abnormalEdit.abnormalChannelName}}</span>
                </el-form-item>
              </div>
              <el-form-item label="责任人">
                <el-input v-model.trim="abnormalEdit.personLiable" placeholder="请输入责任人"  v-if="abnorStatus=='update'" size="small" class="inputType"></el-input>
                <span v-if="abnorStatus=='create'">{{abnormalEdit.personLiable}}</span>
              </el-form-item>
              <el-form-item label="手机号码" required>
                <el-input v-model.trim="abnormalEdit.phone" v-if="abnorStatus=='update'" class="inputType" size="small" onkeyup="value=value.replace(/[^\-?\d.]/g,'').slice(0,11)" onafterpaste="value=value.replace(/[^\-?\d.]/g,'').slice(0,11)"></el-input>
                <span v-if="abnorStatus=='create'">{{abnormalEdit.phone}}</span>
              </el-form-item>
              <el-form-item label="投诉内容" required>
                <el-input type="textarea" v-model.trim="abnormalEdit.abnormalContent" v-if="abnorStatus=='update'" maxlength="200" show-word-limit :autosize="{ minRows: 4, maxRows:6}"></el-input>
                <p v-if="abnorStatus=='create'" class="processingResults">{{abnormalEdit.abnormalContent}}</p>
              </el-form-item>
              <el-form-item label="处理结果" required>
                <el-input type="textarea" v-model.trim="abnormalEdit.processingResults" v-if="abnorStatus=='update'" maxlength="200" show-word-limit :autosize="{ minRows: 4, maxRows:6}"></el-input>
                <p v-if="abnorStatus=='create'" class="processingResults">{{abnormalEdit.processingResults}}</p>
              </el-form-item>

              <el-form-item label="异常工单:" prop="title">
                <div style="margin-bottom: 15px;">
                  <el-upload action="/api/xmbz-goods/file/upload" :data="{tag:'abnormal'}" :on-exceed="handleExceed" list-type="picture-card" :on-success="handabnormalSuccess" :limit="10" :file-list="singAbnormalForm.pics" :on-remove="beforeabnormalRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </el-form-item>

              <!-- 异常工单显示内容 -->
              <div class='showEditShow'>
                <el-button v-if="abnormalEditShow" type="primary" plain @click="handleReject(abnormalEdit)" size="small">驳回</el-button>
                <el-button type="primary" plain @click="handlerEditabnormal(abnormalEdit)" size="small" v-if="abnormalShow">编辑</el-button>
                <el-button type="info" size="small" plain @click="returnAbnormal(abnormalEdit)" v-if="abnormalEditShow">转快乐经理</el-button>
                <el-button type="info" size="small" plain @click="handlerLogabnormal(abnormalEdit)" v-if="abnormalother || abnormalEditShow">日志</el-button>
                <el-button type="danger" size="small" plain @click="handlerabnormalnotrefund(abnormalEdit)" v-if="abnormalother">申请退款不退货</el-button>
                <el-button type="danger" size="small" plain @click="handlerabnormalrefund(abnormalEdit)" v-if="abnormalother">申请退款</el-button>
                <el-button v-if="abnormalEditShow" type="warning" size="small" plain @click="simpleOperationbutton(1,'abnormalEdit')" style='margin-left: 10px'>发送小熊猫</el-button>
                <el-button v-if="abnormalEditShow" type="success" size="small" plain @click="simpleOperationbutton(2, 'abnormalEdit')" style='margin-left: 10px'>正常结案</el-button>
                <el-button v-if="abnormalEditShow" type="danger" size="small" plain @click="simpleOperationbutton(3, 'abnormalEdit')" style='margin-left: 10px'>异常结案</el-button>
              </div>
            </el-form>
          </div>
        </el-dialog>
      </div>

      <!-- 修改订单工单 -->
      <div v-if="this.tagViewCount['修改订单工单'] > 0" v-show="currType == '修改订单工单'">
        <modifyOrder ref="modifyOrder"></modifyOrder>
      </div>

      <!-- 退订工单-->
      <div v-if="this.tagViewCount['退订工单'] > 0" v-show="currType == '退订工单'">
        <div class="filter_container">
          <el-form :inline="true" :model="unsubscribeform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select v-model="deptNameunsubscribe" placeholder="请选择城市" size="small" style="width: 100px;" @change="handleCityunsubscribe" ref="deptNameRef" @keydown.native="selectBlur($event)">
                <el-option v-for="(house,citykey) in cityList" :key="citykey" :label="house.deptName" :value="{value:house.id,label:house.deptName}"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input v-model.trim="unsubscribeform.xmbzNo" size="small" style="width: 160px" @keyup.enter.native="handleFifterunsubscribe(Launchdate6)" clearable placeholder="请输入后台单号"></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input v-model.trim="unsubscribeform.platformOrderId" size="small" style="width: 140px" @keyup.enter.native="handleFifterunsubscribe(Launchdate6)" clearable placeholder="请输入平台单号"></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input v-model.trim="unsubscribeform.operator" size="small" style="width: 140px" @keyup.enter.native="handleFifterunsubscribe(Launchdate6)" clearable placeholder="请输入申请人"></el-input>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!--  <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker v-model="Launchdate6" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :clearable="false" align="right"></el-date-picker>
              <!-- <el-date-picker v-model="unsubscribeform.workOrderStartTime" type="datetime" size="small" placeholder="请选择时间"
                style="width: 180px;margin-right:10px"></el-date-picker>
              <el-date-picker v-model="unsubscribeform.workOrderEndTime" type="datetime" size="small" placeholder="请选择时间"
              style="width: 180px"></el-date-picker>-->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="handleFifterunsubscribe(Launchdate6)" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="unsubscribeList" border style="width: 100%" header-row-class-name="header-row-class-name" cell-class-name="table-cell-class-name">
          <el-table-column prop="cityName" label="城市" width="80" align="center"> </el-table-column>
          <el-table-column prop="xmbzNo" label="后台单号" width="80" align="center"> </el-table-column>
          <el-table-column prop='goodsName' label="蛋糕款式" width="180" align="center"></el-table-column>
          <el-table-column prop="applyReason" label="申请原因" width="150" align="center"> </el-table-column>
          <el-table-column prop="operator" label="申请人" width="80" align="center"> </el-table-column>
          <el-table-column prop="isProductionName" label="是否生产" width="150" align="center"> </el-table-column>
          <el-table-column prop="cakeWhereaboutsName" label="蛋糕去向" width="150" align="center"> </el-table-column>
          <el-table-column prop="createTime" label="创建工单时间" width="150" align="center"> </el-table-column>
          <el-table-column prop="channel" label="渠道" width="150" align="center"> </el-table-column>
          <el-table-column prop="platformOrderId" label="平台单号" width="150" align="center"> </el-table-column>
          <el-table-column prop="unsubscribeReasonName" label="退订原因" width="150" align="center"> </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="unsubscribeform.page" :limit.sync="unsubscribeform.size" @pagination="getunsubscribeList" />
      </div>

      <!--退款工单-->
      <div v-if="this.tagViewCount['退款工单'] > 0" v-show="currType == '退款工单'">

        <div class="filter_container">
          <el-form :inline="true" :model="chargebackform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select v-model="deptNamechargeback" placeholder="请选择城市" size="small" style="width: 100px;" @change="handleCitychargeback" ref="deptNameRef" @keydown.native="selectBlur($event)">
                <el-option v-for="(house,citykey) in cityList" :key="citykey" :label="house.deptName" :value="{value:house.id,label:house.deptName}"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input v-model.trim="chargebackform.xmbzNo" size="small" style="width: 140px" clearable @keyup.enter.native="handleterFifterRefund(Launchdate7)" placeholder="请输入后台单号"></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input v-model.trim="chargebackform.platformNo" size="small" style="width: 140px" @keyup.enter.native="handleterFifterRefund(Launchdate7)" clearable placeholder="请输入平台单号"></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input v-model.trim="chargebackform.refundApplyPeople" size="small" style="width: 130px" @keyup.enter.native="handleterFifterRefund(Launchdate7)" clearable placeholder="请输入申请人"></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select ref="approvalPassRef" v-model="chargebackform.approvalPass" clearable placeholder="请选择审核状态" size="small" style="width: 150px;" @keydown.native="selectBlur($event)">
                <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item,index) in ApprovalStatus" :key="index" size="small"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!--  <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker v-model="Launchdate7" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :clearable="false" align="right"></el-date-picker>
              <!-- <el-date-picker v-model="chargebackform.workOrderStartTime" type="datetime" size="small" placeholder="选择日期时间"
                style="width: 140px;margin-right:10px"></el-date-picker>
              <el-date-picker v-model="chargebackform.workOrderEndTime" type="datetime" size="small" placeholder="选择日期时间"
              style="width: 140px"></el-date-picker>-->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="handleterFifterRefund(Launchdate7)" size="small" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div ref="refundmain">
          <el-table :data="chargebackList" border style="width: 100%" header-row-class-name="header-row-class-name" cell-class-name="table-cell-class-name" @sort-change="handleRefundTableSort">
            <el-table-column prop="refundGradeName" label="等级" width="100" align="center">
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.remind == '2'" class="mb-5">催办</el-tag>
                <el-tag :type="getcomplaintLevelClass(scope.row.refundGradeName )">{{scope.row.refundGradeName}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="cityName" label="城市" width="80" align="center"> </el-table-column>
            <el-table-column prop="xmbzNo" label="后台单号" width="80" align="center"></el-table-column>
            <el-table-column prop='goodsName' label="蛋糕名称" width="100" align="center"></el-table-column>
            <el-table-column prop="refundTypeName" label="退款类型" width="180" align="center"></el-table-column>
            <el-table-column prop="refundReasonName" label="退款原因" width="180" align="center"></el-table-column>
            <el-table-column prop="approvalPassName" label="审核状态" width="180" align="center"></el-table-column>
            <el-table-column prop="refundMoney" label="退款金额" width="80" align="center"></el-table-column>
            <el-table-column label="蛋糕营销金额" width="110" align="center" :formatter="changePayNum"></el-table-column>
            <el-table-column prop="cakeCompensatePrice" label="赔偿金额" width="80" align="center"></el-table-column>
            <el-table-column prop="sincerityGold" label="诚意金" width="80" align="center"></el-table-column>
            <el-table-column prop="giveCakePrice" label="赠送蛋糕金额" width="110" align="center"></el-table-column>
            <el-table-column prop="giveGiftPrice" label="赠送礼品金额" width="110" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建工单时间" width="100" align="center"> </el-table-column>
            <el-table-column prop="updateTime" label="申请退款时间" width="100" align="center" sortable> </el-table-column>
            <el-table-column prop="platformNo" label="平台单号" width="180" align="center"> </el-table-column>
            <el-table-column prop="notPassReason" label="审核不过原因" width="100" align="center"> </el-table-column>
            <el-table-column prop="applyReason" label="申请原因" width="180" align="center"> </el-table-column>
            <el-table-column prop="store" label="平台+门店" width="180" align="center"> </el-table-column>
            <el-table-column prop="refundApplyPeople" label="申请人" width="80" align="center"> </el-table-column>
            <el-table-column prop='isProductionName' label="是否生产" width="180" align="center"> </el-table-column>
            <el-table-column prop="cakeWhereaboutsName" label="蛋糕去向" width="180" align="center"> </el-table-column>
            <el-table-column prop="refundGradeName" label="退款等级" width="180" align="center"> </el-table-column>
            <el-table-column prop="channelTypeName" label="渠道类别" width="180" align="center"></el-table-column>
            <el-table-column prop="channelName" label="渠道" width="180" align="center"></el-table-column>
            <el-table-column prop="refundSourceName" label="退款来源" width="180" align="center"></el-table-column>
            <el-table-column prop="offsetTime" label="操作" width="160" fixed='right' align="center">
              <template slot-scope="scope">
                <el-button size="mini" plain @click="headleChargeback(scope.row,'chargebackEdit')" class="">查看</el-button>
                <el-button v-if="scope.row.remind != '2'" type="danger" size="mini" plain @click="headleChargebackRemind(scope.row)">催办</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="chargebackform.page" :limit.sync="chargebackform.size" @pagination="getabchargebackList" />
        </div>

        <el-dialog title="退款订单" :visible.sync="showComplaintEdit" width="50%">
          <div v-if="chargebackStatus=='update'">
            <el-form ref="chargebackEdit" :model="chargebackEdit" :rules="chargebackEditrules" label-width="100px">
              <el-form-item label="后台单号">
                <span>{{chargebackEdit.xmbzNo}}</span>
              </el-form-item>
              <el-form-item label="渠道类别">
                <span v-if="chargebackEdit.channelTypeName">{{chargebackEdit.channelTypeName}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="渠道">
                <span v-if="chargebackEdit.channelName">{{chargebackEdit.channelName}}</span>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="是否生产">
                <span v-if="chargebackEdit.isProduction==1">是</span>
                <span v-else>否</span>
              </el-form-item>
              <el-form-item label="退款等级">
                <el-select v-model="chargebackEdit.refundGrade" v-if="Editrefund=='update'" size="small" placeholder="请选择退款等级" @change="handlerefundGrade">
                  <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item,index) in GradeList" :key="index"></el-option>
                </el-select>
                <span v-if="Editrefund=='create'">{{chargebackEdit.refundGradeName}}</span>
              </el-form-item>
              <el-form-item label="退款原因">
                <el-select v-model="refundReasonNames" v-if="Editrefund=='update'" size="small" placeholder="请选择退款原因" @visible-change="refundReasonList" @change="handlerefundReason">
                  <el-option :label="item.dictValue" :value="{label:item.dictValue,value:item.dictKey}" v-for="(item,index) in ReasonList" :key="index"></el-option>
                </el-select>
                <span v-if="Editrefund=='create'">{{chargebackEdit.refundReasonName}}</span>
              </el-form-item>
              <div class="lows">
                <el-form-item label="退款类型">
                  <el-select v-model="chargebackEdit.refundType" v-if="Editrefund=='update'" size="small" placeholder="请选择退款类型">
                    <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item) in RefundTypeList" :key="item.id"></el-option>
                  </el-select>
                  <span v-if="Editrefund=='create'">{{chargebackEdit.refundTypeName}}</span>
                </el-form-item>
              </div>
              <el-form-item label="申请原因" required>
                <el-input v-model.trim="chargebackEdit.applyReason" type="textarea" style="width:200px" v-if="Editrefund=='update'" size="small" maxlength="50" show-word-limit :autosize="{ minRows: 4, maxRows:6}"></el-input>
                <p v-if="Editrefund=='create'" class="processingResults">{{chargebackEdit.applyReason}}</p>
              </el-form-item>
              <el-form-item label="审核状态">
                <el-select v-model="chargebackEdit.approvalPass" placeholder="请选择审核状态" v-if="Editrefund=='update'" size="small">
                  <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item,index) in ApprovalStatus" :key="index" size="small"></el-option>
                </el-select>
                <span v-if="Editrefund=='create'">{{chargebackEdit.approvalPassName}}</span>
              </el-form-item>
              <!-- <el-form-item label="退款方式">
                <span v-if="Editrefund=='create'">{{chargebackEdit.refundModeName}}</span>
                <el-radio-group v-model="chargebackEdit.refundMode" v-else>
                  <el-radio v-for="(item,index) in RefundModeList" :key="index" :label="item.dictKey">
                    {{ item.dictValue }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>-->

              <el-form-item label="退款金额：" required>
                <el-input v-if="Editrefund=='update'" v-model.trim="chargebackEdit.refundMoney" class="inputType" size="small" style="width:200px" onkeyup="value=value.replace(/[^\-?\d.]/g,'')" onafterpaste="value=value.replace/[^\-?\d.]/g,'')"></el-input>
                <span v-if="Editrefund=='create'">{{chargebackEdit.refundMoney}}</span>
              </el-form-item>
              <div v-if="Editrefund=='update'">
                <el-radio-group v-model="chargebackEdit.compensationMethod" style="padding-left: 40px;">
                  <el-radio :label="item.dictKey" :key="item.dictKey" v-for="item in compensationList" @change="headlecompensationMethod(item.dictKey,chargebackEdit.goodsPrice/100)">
                    <span>{{item.dictValue}}</span>
                  </el-radio>
                </el-radio-group>
                <div class="compensationMethod">
                  <el-form-item label="赔偿金额" label-width="80px">
                    <span v-if="Editrefund=='update'">
                      <span>
                        <el-input v-model.trim="cakeCompensatePrice" class="inputType" size="small" style="width:100px" onkeyup="value=value.replace(/[^\-?\d.]/g,'')" onafterpaste="value=value.replace/[^\-?\d.]/g,'')"></el-input>
                      </span>
                    </span>
                    <span v-if="Editrefund=='create'">{{chargebackEdit.cakeCompensatePrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
                  </el-form-item>
                  <el-form-item label="诚意金" label-width="80px">
                    <span v-if="Editrefund=='update'">
                      <el-input v-model.trim="chargebackEdit.sincerityGold" class="inputType" size="small" style="width:100px" onkeyup="value=value.replace(/[^\-?\d.]/g,'')" onafterpaste="value=value.replace/[^\-?\d.]/g,'')"></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
                    </span>
                    <span v-if="Editrefund=='create'">{{chargebackEdit.sincerityGold||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
                  </el-form-item>
                  <el-form-item label="赠送蛋糕" label-width="80px">
                    <span v-if="Editrefund=='update'">
                      <el-input v-model.trim="chargebackEdit.giveCakePrice" class="inputType" size="small" style="width:100px" onkeyup="value=value.replace(/[^\-?\d.]/g,'')" onafterpaste="value=value.replace/[^\-?\d.]/g,'')"></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
                    </span>
                    <span v-if="Editrefund=='create'">{{chargebackEdit.giveCakePrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
                  </el-form-item>
                  <el-form-item label="赠送礼品" label-width="80px">
                    <span v-if="Editrefund=='update'">
                      <el-input v-model.trim="chargebackEdit.giveGiftPrice" class="inputType" size="small" style="width:100px" onkeyup="value=value.replace(/[^\-?\d.]/g,'')" onafterpaste="value=value.replace/[^\-?\d.]/g,'')"></el-input>&nbsp;&nbsp;&nbsp;元（默认0元）
                    </span>
                    <span v-if="Editrefund=='create'">{{chargebackEdit.giveGiftPrice||0}}&nbsp;&nbsp;&nbsp;元（默认0元）</span>
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="门店" required>
                <el-input v-model.trim="chargebackEdit.store" size="small" type="textarea" style="width:200px" maxlength="30" show-word-limit :autosize="{ minRows: 2, maxRows:4}" v-if="Editrefund=='update'"></el-input>
                <p v-if="Editrefund=='create'" class="processingResults">{{chargebackEdit.store}}</p>
              </el-form-item>
              <el-form-item label="退款二维码" v-if="Editrefund=='update'">
                <el-upload class="avatar-uploader" action="/api/xmbz-goods/file/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :data="{tag:'refund'}" :before-upload="beforeAvatarUpload">
                  <img v-if="chargebackEdit.refundCode" :src="chargebackEdit.refundCode" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="退款二维码" v-if="Editrefund=='create'">
                <img :src="chargebackEdit.refundCode" class="avatar" v-if="chargebackEdit.refundCode" @click="handlePictureCardPreview(chargebackEdit.refundCode)">
                <img :src="chargebackEdit.refundCode" class="avatar" v-else>
              </el-form-item>
              <div class="buttontips">
                <el-button type="success" size="small" plain @click="handlerSaverefund(chargebackEdit,'chargebackEdit')" v-if="RequetrefundShowsEdit">保存</el-button>
                <!-- <el-button
                  type="warning"
                  size="small"
                  plain
                  @click="handlerefundCancel(chargebackEdit,'chargebackEdit')"
                  v-if="RequetrefundShowsEdit"
                >取消</el-button> -->
              </div>
              <div class="buttontips">
                <el-button type="primary" size="small" plain @click="handlerEditrefund(chargebackEdit)" v-if="RequetrefundShows">编辑</el-button>
                <el-button type="info" size="small" plain @click="handlerLogrefund(chargebackEdit)" v-if="chargebackEditotherShow">日志</el-button>
                <!-- <el-button type="danger" size="small" plain @click="handlerRequetrefund(chargebackEdit)" v-show="chargebackEditotherShow" v-if="chargebackEdit.approvalPass=='1'||chargebackEdit.approvalPass=='4'">申请退款</el-button> -->
                <el-button type="danger" size="small" plain @click="handlerApproved(chargebackEdit)" v-show="chargebackEditotherShow" v-if="chargebackEdit.approvalPass != '2'">申请退款</el-button>
                <el-button type="info" size="small" plain @click="handlerNotapproved(chargebackEdit)" v-show="chargebackEditotherShow" v-if="chargebackEdit.approvalPass != '2'">退款审核不通过</el-button>
              </div>
            </el-form>
          </div>
        </el-dialog>
      </div>

      <!-- 报损工单查询 -->
      <div v-if="this.tagViewCount['报损工单'] > 0" v-show="currType == '报损工单'">
        <div class="filter_container">
          <el-form :inline="true" :model="Lossreportform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select v-model="deptNameLossreport" placeholder="请选择城市" size="small" style="width: 100px;" @change="handleCityLossreport" ref="deptNameRef" @keydown.native="selectBlur($event)">
                <el-option v-for="(house,citykey) in cityList" :key="citykey" :label="house.deptName" :value="{value:house.id,label:house.deptName}"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input v-model.trim="Lossreportform.xmbzNo" size="small" style="width: 160px" @keyup.enter.native="handleFifterDamaged(Launchdate8)" clearable placeholder="请输入后台单号"></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input v-model.trim="Lossreportform.platformOrderId" size="small" style="width: 140px" @keyup.enter.native="handleFifterDamaged(Launchdate8)" clearable placeholder="请输入平台单号"></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input v-model.trim="Lossreportform.operator" size="small" style="width: 130px" @keyup.enter.native="handleFifterDamaged(Launchdate8)" clearable placeholder="请输入申请人"></el-input>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!-- <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker v-model="Launchdate8" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :clearable="false" align="right"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="handleFifterDamaged(Launchdate8)" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="Lossreport" border style="width: 100%" header-row-class-name="header-row-class-name" cell-class-name="table-cell-class-name">
          <el-table-column prop="cityName" label="城市" width="80" align="center"> </el-table-column>
          <el-table-column prop="xmbzNo" label="后台单号" width="100" align="center"> </el-table-column>
          <el-table-column prop="goodsName" label="蛋糕名称" width="220" align="center"></el-table-column>
          <el-table-column prop="lossReasonName" label="报损原因" width="150" align="center"> </el-table-column>
          <el-table-column prop="createTime" label="创建工单时间" width="170" align="center"> </el-table-column>
          <el-table-column prop="operator" label="申请人" width="80" align="center"> </el-table-column>
          <el-table-column prop="isProductionName" label="是否生产" width="150" align="center"> </el-table-column>
          <el-table-column prop="cakeWhereaboutsName" label="蛋糕去向" width="150" align="center"> </el-table-column>
          <el-table-column prop="channel" label="渠道" width="150" align="center"> </el-table-column>
          <el-table-column prop="platformOrderId" label="平台单号" width="150" align="center"> </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="Lossreportform.page" :limit.sync="Lossreportform.size" @pagination="getLossreport" />
      </div>
      <!-- 生产申诉 -->
      <div v-if="this.tagViewCount['生产申诉'] > 0" v-show="currType == '生产申诉'">
        <productAppeal />
      </div>
      <!-- 快乐超时申诉 -->
      <div v-if="this.tagViewCount['快乐超时申诉'] > 0" v-show="currType == '快乐超时申诉'">
        <OvertimeRepresentations />
      </div>
      <!-- 快乐工单申诉 -->
      <div v-if="this.tagViewCount['快乐工单申诉'] > 0" v-show="currType == '快乐工单申诉'">
        <Representations />
      </div>

      <!-- 快乐工单查询-->
      <div v-if="this.tagViewCount['快乐工单查询'] > 0" v-show="currType == '快乐工单查询'">
        <div class="filter_container">
          <el-form :inline="true" :model="workorderform" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select v-model="deptNameworkorder" placeholder="请选择城市" size="small" style="width: 100px;" @change="handleCityworkorder" ref="deptNameRef" @keydown.native="selectBlur($event)">
                <el-option v-for="(house,citykey) in cityList" :key="citykey" :label="house.deptName" :value="{value:house.id,label:house.deptName}"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="后台单号">
              <el-input v-model.trim="workorderform.xmbzNo" size="small" clearable placeholder="请输入后台单号" @keyup.enter.native="handleFilterwork(Launchdate9)"></el-input>
            </el-form-item>
            <el-form-item label="平台单号">
              <el-input v-model.trim="workorderform.platformNo" size="small" placeholder="请输入平台单号" clearable @keyup.enter.native="handleFilterwork(Launchdate9)"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model.number="workorderform.phone" onkeyup="value=value.replace(/[^\-?\d.]/g,'')" maxlength="11" onafterpaste="value=value.replace(/[^\-?\d.]/g,'')" size="small" clearable placeholder="请输入手机号码" @keyup.enter.native="handleFilterwork(Launchdate9)"></el-input>
            </el-form-item>
            <el-form-item label="创建工单时间">
              <!-- <el-date-picker v-model="Launchdate" type="datetimerange" size="small" :default-time="['00:00:00', '23:59:00']"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :clearable='false'>
              </el-date-picker>-->
              <el-date-picker v-model="Launchdate9" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :clearable="false" align="right"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="handleFilterwork(Launchdate9)" size="small" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="worklist" v-for="item in workorderlist" :key="item.index">
          <!-- 催单 -->
          <div class="work_list" v-if="item.workOrderType=='催单'">
            <div class="order-num">
              <span class="ml-5">后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="work_lists line">
              <div>
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>配送时间：</em>
                  {{item.deliveryTime}}
                </p>
              </div>
              <div>
                <p>
                  <em>配送员：</em>
                  {{item.delivery}}
                </p>
                <p>
                  <em>渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>催单类型：</em>
                  <span v-if="item.reminderType==1">配送时间前催单</span>
                  <span v-if="item.reminderType==2">配送时间内催单</span>
                  <span v-if="item.reminderType==3">超时催单</span>
                </p>
              </div>
              <div>
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>分仓：</em>
                  {{item.warehouse}}
                </p>
              </div>
            </div>
            <div class="work_lists line">
              <div>
                <p>
                  <em>催单内容：</em>
                  {{item.reminderContent}}
                </p>
              </div>
            </div>
          </div>
          <!-- 备款工单 -->
          <div class="work_list" v-if="item.workOrderType=='备款'">
            <div class="order-num">
              <span class="ml-5">后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em class="grade">{{item.provisionsStatusName}}</em>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p>
                <em>蛋糕名称及订单明细编码：</em>
                {{item.goodsName}}~{{item.orderDetailId}}
              </p>
              <p style="display: flex;">
                <em>备款内容：</em>
                <span style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;">{{item.provisionsContent}}</span>
              </p>
            </div>
            <div class="work_lists line">
              <div>
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>蛋糕去向：</em>
                  {{item.cakeWhereaboutsName}}
                </p>
                <p>
                  <em>责任部门：</em>
                  {{item.personDept}}
                </p>
                <p v-if="item.provisionsStatusName=='已抵用'" class="red">
                  <em>抵用单号：</em>
                  <span>{{item.offsetNo}}</span>
                </p>
                <p v-if="item.provisionsStatusName=='已抵用'">
                  <em>抵用时间：</em>
                  <span>{{item.offsetTime}}</span>
                </p>
              </div>
              <div>
                <p>
                  <em>责任人：</em>
                  {{item.personLiable}}
                </p>
                <p>
                  <em>分仓：</em>
                  {{item.branchWarehouse}}
                </p>
              </div>
              <div></div>
            </div>
          </div>
          <!-- 投诉 -->
          <div class="work_list" v-if="item.workOrderType=='投诉'">
            <div class="order-num">
              <span class="ml-5">后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em class="grade" v-if="item.handleStateName">{{item.complaintLevelName}}</em>
            <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p v-for="(child,index) in item.orderDetailCakes" :key="index" style="display: block;">
                <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                <span>{{child.goodsName}}~{{child.orderDetailId}}</span>
              </p>
              <p style="display: flex;">
                <em>投诉内容:</em>
                <span style="width: 80%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;">{{item.complaintContent}}</span>
              </p>
              <p style="display: flex;">
                <em>处理结果：</em>
                <span style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;">{{item.processingResults}}</span>
              </p>
            </div>
            <div class="work_lists line">
              <div>
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>责任人：</em>
                  {{item.personLiable}}
                </p>
                <p>
                  <em>订单渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>投诉渠道 ：</em>
                  {{item.complaintChannelName}}
                </p>
              </div>
              <div>
                <p>
                  <em>部门失误类型：</em>
                  {{item.responsibleDepartmentName}}~{{item.departmentErrorTypeName}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>处理状态：</em>
                  {{item.handleStateName}}
                </p>
                <!--  <p>
                  <em>赔偿方式：</em>
                  <span>
                    <span v-for="child in item.compensationMethod" :key="child.id">
                      <span v-if="child==1">免单;</span>
                      <span v-if="child==2">免半单;</span>
                      <span v-if="child==3">诚意金;</span>
                      <span v-if="child==4">赠送蛋糕;</span>
                      <span v-if="child==5">赠品礼品;</span>
                      <span v-if="child==6">无赔偿;</span>
                    </span>
                  </span>
                </p>-->
              </div>
              <div>
                <p>
                  <em>手机号：</em>
                  {{item.phone}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
                <p>
                  <em>结案时间：</em>
                  {{item.endTime}}
                </p>
                <!--   <p>
                  <em>退款金额：</em>
                  {{item.refundAmount}}
                </p>
                <p>
                  <em>赔偿金：</em>
                  {{item.damages}}
                </p>-->
              </div>
            </div>
          </div>
          <!-- 问题 -->
          <div class="work_list" v-if="item.workOrderType=='问题'">
            <div class="order-num">
              <span class="ml-5">后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em class="grade" v-if="item.handleStateName">{{item.handleStateName}}</em>
            <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p v-for="(child,index) in item.orderDetailCakes" :key="index" style="display: block;">
                <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                <span>{{child.goodsName}}~{{child.orderDetailId}}</span>
              </p>
              <p style="display: flex;">
                <em>投诉内容:</em>
                <span style="width: 80%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;">{{item.complaintContent}}</span>
              </p>
              <p style="display: flex;">
                <em>处理结果:</em>
                <span style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;">{{item.processingResults}}</span>
              </p>
            </div>
            <div class="work_lists line">
              <div>
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>责任人：</em>
                  {{item.personLiable}}
                </p>
                <p>
                  <em>订单渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>投诉渠道 ：</em>
                  {{item.complaintChannelName}}
                </p>
              </div>
              <div>
                <p>
                  <em>部门失误类型：</em>
                  {{item.responsibleDepartmentName}}~{{item.departmentErrorTypeName}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>处理状态：</em>
                  {{item.handleStateName}}
                </p>
              </div>
              <div>
                <p>
                  <em>手机号：</em>
                  {{item.phone}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
                <p v-if="item.handleState==2">
                  <em>结案时间：</em>
                  {{item.endTime}}
                </p>
                <p v-if="item.handleState==3">
                  <em>结案时间：</em>
                  {{item.endTime}}
                </p>
              </div>
            </div>
          </div>
          <!-- 异常 -->
          <div class="work_list" v-if="item.workOrderType=='异常'">
            <div class="order-num">
              <span class="ml-5">后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em class="grade" v-if="item.complaintLevelName">{{item.complaintLevelName}}</em>
            <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p v-for="(child,index) in item.orderDetailCakes" :key="index" style="display: block;">
                <em style="width: 120px;">蛋糕名称及订单明细编码：</em>
                <span>{{child.goodsName}}~{{child.orderDetailId}}</span>
              </p>
              <p style="display: flex;">
                <em>投诉内容:</em>
                <span style="width: 80%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;">{{item.abnormalContent}}</span>
              </p>
              <p style="display: flex;">
                <em>处理结果：</em>
                <span style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;">{{item.processingResults}}</span>
              </p>
            </div>
            <div class="work_lists line">
              <div>
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人：</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>责任人：</em>
                  {{item.personLiable}}
                </p>
                <p>
                  <em>订单渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>异常渠道 ：</em>
                  {{item.abnormalChannelName}}
                </p>
              </div>
              <div>
                <p>
                  <em>部门失误类型：</em>
                  {{item.responsibleDepartmentName}}~{{item.departmentErrorTypeName}}
                </p>
                <p>
                  <em>创建工单时间：</em>
                  {{item.createTime}}
                </p>
                <p>
                  <em>处理状态：</em>
                  {{item.handleStateName}}
                </p>
              </div>
              <div>
                <p>
                  <em>手机号：</em>
                  {{item.phone}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformNo}}
                </p>
              </div>
            </div>
          </div>
          <!-- 退款 -->
          <div class="work_list" v-if="item.workOrderType=='退款'">
            <div class="order-num">
              <span class="ml-5">后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <em class="grade" v-if="item.complaintLevelName" style="margin-right: 1px;">{{item.complaintLevelName}}</em>
            <el-tag type="warning" v-if="item.refundNotReturn">{{item.refundNotReturn}}</el-tag>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p>
                <em>蛋糕名称及订单明细编码：</em>
                {{item.goodsName}}
              </p>
              <p>
                <em>创建工单时间：</em>
                {{item.createTime}}
              </p>
              <p>
                <em>平台单号：</em>
                {{item.platformNo}}
              </p>
              <p style="display: flex;">
                <em>申请原因：</em>
                <span style="width: 75%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;">{{item.applyReason}}</span>
              </p>
            </div>
            <div class="work_lists line">
              <div>
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人:</em>
                  {{item.refundApplyPeople}}
                </p>
                <p>
                  <em>是否生产:</em>
                  {{item.isProductionName}}
                </p>
                <p>
                  <em>蛋糕去向:</em>
                  {{item.cakeWhereaboutsName}}
                </p>
                <p v-if="item.refundMode==1">
                  <em>退款金额：</em>
                  {{item.refundMoney}}
                </p>
                <div v-if="item.refundMode==2">
                  <p>
                    <em>蛋糕营销金额:</em>
                    {{item.goodsPrice/100}}
                  </p>
                  <p>
                    <em>蛋糕金额:</em>
                    {{item.cakeCompensatePrice}}
                  </p>
                  <p>
                    <em>诚意金：</em>
                    {{item.sincerityGold}}
                  </p>
                  <p>
                    <em>赠送蛋糕金额：</em>
                    {{item.giveCakePrice}}
                  </p>
                  <p>
                    <em>赠送礼品金额：</em>
                    {{item.giveGiftPrice}}
                  </p>
                  <p>
                    <em>赔偿总金额</em>
                    {{item.refundMoney/100}}
                  </p>
                </div>
                <p>
                  <em>退款来源：</em>
                  {{item.refundSourceName}}
                </p>
                <p>
                  <em>审核状态：</em>
                  <span>{{item.approvalPassName}}</span>
                </p>
              </div>
              <div>
                <p>
                  <em>渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>退款原因：</em>
                  {{item.refundReasonName}}
                </p>
                <p>
                  <em>退款类型：</em>
                  {{item.whetherRefundName}}
                </p>
              </div>
              <div>
                <p>
                  <em>退款方式：</em>
                  <span>{{item.refundModeName}}</span>
                </p>
                <p>
                  <em>平台+门店：</em>
                  {{item.store}}
                </p>
                <p>
                  <em>退款等级：</em>
                  {{item.refundGradeName}}
                </p>
              </div>
            </div>
          </div>
          <!-- 退定 -->
          <div class="work_list" v-if="item.workOrderType=='退订'">
            <div class="order-num">
              <span class="ml-5">后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="line">
              <p>
                <em>蛋糕名称及订单明细编码:</em>
                {{item.goodsName}}~{{item.orderDetailId}}
              </p>
              <p style="display: flex;">
                <em>申请原因:</em>
                <span style="width: 80%;overflow: hidden; word-wrap: break-word; word-break: break-all;overflow: hidden;">{{item.applyReason}}</span>
              </p>
            </div>
            <div class="work_lists line">
              <div>
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人:</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>是否生产:</em>
                  {{item.isProductionName}}
                </p>
                <p>
                  <em>蛋糕去向:</em>
                  {{item.cakeWhereaboutsName}}
                </p>
              </div>
              <div>
                <p>
                  <em>渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformOrderId}}
                </p>
                <p>
                  <em>退订原因：</em>
                  {{item.unsubscribeReasonName}}
                </p>
              </div>
              <div>
                <p>
                  <em>创建工单时间:</em>
                  {{item.createTime}}
                </p>
              </div>
            </div>
          </div>
          <!-- 报损 -->
          <div class="work_list" v-if="item.workOrderType=='报损'">
            <div class="credittype">
              <span class="tips">{{item.workOrderType}}</span>
            </div>
            <div class="order-num">
              <span class="ml-5">后台单号：{{item.xmbzNo}}</span>
              <i></i>
            </div>
            <div class="line">
              <p>
                <em>蛋糕名称及订单明细编码:</em>
                {{item.goodsName}}~ {{item.orderDetailId}}
              </p>
              <p>
                <em>创建工单时间:</em>
                {{item.createTime}}
              </p>
            </div>
            <div class="work_lists line">
              <div>
                <p>
                  <em>城市：</em>
                  {{item.cityName}}
                </p>
                <p>
                  <em>申请人:</em>
                  {{item.operator}}
                </p>
                <p>
                  <em>是否生产:</em>
                  {{item.isProductionName}}
                </p>
                <p>
                  <em>蛋糕去向:</em>
                  {{item.cakeWhereaboutsName}}
                </p>
              </div>
              <div>
                <p>
                  <em>渠道：</em>
                  {{item.channel}}
                </p>
                <p>
                  <em>平台单号：</em>
                  {{item.platformOrderId}}
                </p>
                <p>
                  <em>报损原因：</em>
                  {{item.lossReasonName}}
                </p>
              </div>
              <div></div>
            </div>
          </div>
        </div>
        <div class="work_list" v-if="workorderlist.length<=0">
          <p class="nodata">暂无数据</p>
        </div>
        <!-- <pagination
          v-show="total>0"
          :total="total"
          :page.sync="workorderform.page"
          :limit.sync="workorderform.size"
          @pagination="getOrderList"
        />-->
      </div>

      <!-- 咨询快乐工单 -->
      <div v-if="this.tagViewCount['咨询快乐工单'] > 0" v-show="currType == '咨询快乐工单'">
        <consultHappy />
      </div>

      <!-- 咨询客服工单 -->
      <div v-if="this.tagViewCount['咨询客服工单'] > 0" v-show="currType == '咨询客服工单'">
        <consultCustomerService />
      </div>
    </div>

    <!-- 图片放大功能 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 异常申请退款 -->
    <el-dialog title="异常申请退款" :visible.sync="AbnormalRefundVisible" :show-close="false" :before-close="handleCloseAbnormal">
      <abnormalRefund :abnormalEdit="abnormalEdit" @close="handelDialogReset"></abnormalRefund>
    </el-dialog>
    <!-- 退款不退货 异常 -->
    <el-dialog title="退款不退货" :visible.sync="AbnormalnotRefundVisible" :show-close="false" :before-close="handleCloseAbnormalnotRefund">
      <abnormalnotRefund :abnormalEditnot="abnormalEdit" @close="handelDialogResetnot"></abnormalnotRefund>
    </el-dialog>

    <!-- 显示图片 -->
    <el-dialog :visible.sync="isImgShow" width="50%" :before-close="handImgShow">
      <img :src="src" style="width: 100%" />
    </el-dialog>

    <rejectDialog ref="rejectDialog" @submit="handleRejectSuccess"></rejectDialog>
    <orderLogDialog ref="orderLogDialog"></orderLogDialog>
  </basic-container>
</template>
<script>
import OvertimeRepresentations from '@/components/OvertimeRepresentations'  // 超市申诉
import Representations from '@/components/Representations'  // 申诉工单
import Pagination from "@/components/Pagination" // 分页
import abnormalRefund from "@/components/abnormalRefund" // 投诉退款申请
import abnormalnotRefund from "@/components/abnormalnotRefund" // 投诉退货不退款申请
import checked from "@/assets/image/checkeds.png"
import { complaintsList, prodComplaintTem } from '@/const'
import { mapGetters } from 'vuex'
import reminder from './reminder'
import problem from './problem'
import productAppeal from './productAppeal'  // 超市申诉
import consultHappy from './consultHappy'
import consultCustomerService from './consultCustomerService'
import orderLogDialog from '@/components/dialog/orderLogDialog'

import {
  //接口
  ResponsibleDepartmentList,
  CakeWhereaboutsList,
  ProvisionsOperationList,
  ReserveOrderList,
  UnsubscribePage,
  CompensationMethod,
  FullRefundList,
  RefundReasonList,
  RefundGradeList,
  RefundTypeList,
  WorkOrderRefundPage,
  updateWorkOrder, // 更新保存备款
  getApplyRefund, //申请退款
  ApprovalPass, // 通过
  ApprovalNotPass, // 不通过
  updateWorkOrderRefund, //退款编辑
  getApprovalList, // 审核状态
  // 投诉
  // DepartmentErrorTypeList, //部门失误类型列表
  getComplaintLevelList, //投诉等级列表
  getComplaintChannelList, //投诉渠道列表
  getHandleStateList, //处理状态
  AbnormalChannelList, // 异常
  getWorkOrderAbnormalPage, // 异常工单查询
  updateWorkOrderAbnormal, //异常工单编辑
  getWorkOrderQueryList, //工单查询
  getWorkOrderLossPage, //报损工单
  getRefundModeList, //退款方式
  deptdepts,
  relationtype,   // 字典API
  getResponsibleDepartmentErrorTree,   // 城市tree结构
  returnAbnormal, // 异常工单转异常配送
  workReminder, // 催单
} from "@/api/workorder"
import rejectDialog from './components/rejectDialog'
import complaint from './complaint'
import modifyOrder from './modifyOrder'

export default {
  components: {
    Pagination,
    abnormalRefund,
    abnormalnotRefund,
    Representations,
    OvertimeRepresentations,
    rejectDialog,
    reminder,
    complaint,
    problem,
    productAppeal,
    consultHappy,
    consultCustomerService,
    orderLogDialog,
    modifyOrder,
  },
  data () {
    return {
      src: '',   // 点击图片地址
      isImgShow: false,  // 图片弹出框
      options: [],  //获取的数组
      exceptionEditing: [],    // 异常编辑数组

      abnormalError: [],  // 异常工单
      problemList: [],   //  问题投诉显示列表

      addSelectList: [],  // 添加投诉内容数组

      configTips: null,  // 内容
      relationtype: [],  // 投诉字典
      // CommodityFormList:{   //投诉图片数组
      //   pics:[]
      // },
      singAbnormalForm: {    // 异常图片数组
        pics: []
      },
      // AbnormalFormList:{    // 异常图片数组
      //   pics: []
      // },
      checked,
      // 可供展示的按钮
      initTags: [
        {
          name: "催单工单",
          code: 'classification_Reminders'
        },
        {
          name: "备款工单",
          code: 'classification_provision'
        },
        {
          name: "投诉工单",
          code: 'classification_complaint'
        },

        {
          name: "问题工单",
          code: 'classification_problem'
        },
        {
          name: "异常工单",
          code: 'classification_abnormal'
        },
        {
          name: "修改订单工单",
          code: 'classification_modifyOrder'
        },
        {
          name: "退订工单",
          code: 'classification_unsubscribe'
        },
        {
          name: "退款工单",
          code: 'classification_refund'
        },
        {
          name: "报损工单",
          code: 'classification_lossreport'
        },
        {
          name: '生产申诉',
          code: 'classification_productAppeal'
        },
        {
          name: '快乐超时申诉',
          code: 'classification_timeoutAppeal'
        },
        {
          name: "快乐工单申诉",
          code: 'classification_grievance'
        },
        {
          name: "快乐工单查询",
          code: 'classification_query'
        },
        {
          name: "咨询快乐工单",
          code: 'classification_consultHappy'
        },
        {
          name: "咨询客服工单",
          code: 'classification_consultCustomerService'
        }
      ],
      tagViewCount: {
        "催单工单": 0,
        "备款工单": 0,
        "投诉工单": 0,
        "问题工单": 0,
        "异常工单": 0,
        "修改订单工单": 0,
        "退订工单": 0,
        "退款工单": 0,
        "报损工单": 0,
        "生产申诉": 0,
        "快乐超时申诉": 0,
        "快乐工单申诉": 0,
        "快乐工单查询": 0,
        "咨询快乐工单": 0,
        "咨询客服工单": 0
      },
      damagetotal: 0,
      total: 0,
      compensationMethodName: [],
      AbnormalnotRefundVisible: false,
      imageUrl: "", //退款二维码
      LogList: [], //日志表
      showEdit: [],
      cityList: [], // 城市选择
      cakestatusList: [], // 蛋糕状态
      dealstatusList: [], // 处理状态
      provisionsOperationList: [], //备款状态
      departmentList: [], // 责任部门
      departmentTypeList: [], // 责任部门失误类型
      cakewherelist: [], //蛋糕去向
      channelzlist: [], //渠道
      Editrefund: "",
      // 快乐工单查询
      workorderform: {
        cityId: "",
        xmbzNo: "", //订单号
        platformNo: "", //第三方平台单号
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        phone: "" //收货人手机号
        // page: 1, //页码
        // size: 10 //每页页码
      },
      workorderlist: [], // 工单列���

      //备款数据-------------------------------------------------------------------------------
      damagedform: {
        cityId: "",
        xmbzNo: "", //后台单号
        operator: "", //申请人
        personDept: "", //责任部门
        personLiable: "", //责任人
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        provisionsStatus: "", //备款状态 1:已抵用 2:未抵用
        cakeWhereabouts: "", //蛋糕去向 1:生产中 2:在分仓 3:配送中 4:其他
        page: 1, //页码
        size: 10 //每页页码
      },
      damagedList: [], //备款列表
      damagelistindex: -1, //备款索引值
      damagedialogStatus: "",
      damageStatus: "",
      damageformEdit: "",
      Logdamageshow: true,
      damageShow: true,
      damageEditShow: false,
      damageformPersonDept: "",
      damageformPersonName: "",
      damageformrules: {
        personLiable: [
          {
            required: true,
            message: "责任人必填",
            trigger: "blur"
          },
          {
            max: 10,
            message: "长度在10个字符以内",
            trigger: "blur"
          }
        ],
        provisionsContent: [
          {
            required: true,
            message: "备款内容必填",
            trigger: "blur"
          }
        ]
      },
      abnormalEditrules: {
        abnormalContent: [
          {
            required: true,
            message: "投诉内容必填",
            trigger: "blur"
          }
        ],
        processingResults: [
          {
            required: true,
            message: "处理结果必填",
            trigger: "blur"
          }
        ],
      },
      chargebackEditrules: {
        applyReason: [
          {
            required: true,
            message: "申请原因必填",
            trigger: "blur"
          }
        ],
        store: [
          {
            required: true,
            message: "门店必填",
            trigger: "blur"
          }
        ],
        refundMoney: [
          {
            required: true,
            message: "退款金额必填",
            trigger: "blur"
          }
        ]
      },

      //退定数据 -------------------------------------------------------------------------------
      unsubscribeform: {
        cityId: "",
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformOrderId: "", //第三方平台单号
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        page: 1, //页码
        size: 10 //每页页码
      },
      unsubscribeList: [],
      // 报损工单---------------------------------------------------------------
      Lossreport: [],
      Lossreportform: {
        cityId: "",
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformOrderId: "", //第三方平台单号
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        page: 1, //页码
        size: 10 //每页页码
      },
      //投诉查询条件------------------------------------------------------------------
      complaintindex: -1, //投诉
      complaindialogStatus: "",
      showComplaintEdit: false,
      commethodNameList: [],
      ComplaintList: [],
      complaintListEdit: [],
      complaintshowEdit: [],
      compensationList: [], //赔偿方式
      ComplaintChannelList: [], //投诉渠道
      ComplaintLevelList: [], // 投诉等级
      responsibleDepartmentIds: "", //部门类型ID
      responsibleDepartmentOtherIds: "",
      departmentErrorTypeIds: "", //失误类型ID
      //公共------------------------------------------------------------------

      // 退款工单数据------------------------------------------------------------------
      methodNameList: [],
      compensationMethod: [""],
      cakeCompensatePrice: "",
      chargebackIndex: -1,
      chargebackStatus: "",
      refundAdd: {
        refundCode: ""
      },
      typeKind: [],
      refundmode: 1, //退款方式
      ApprovalStatus: [], //审核状态
      chargebackform: {
        cityId: "",
        xmbzNo: "", //订单号
        refundApplyPeople: "", //申请人
        platformNo: "", //第三方平台单号
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束���间
        approvalPass: "", //审批是否通过  0:否 1:是
        page: 1, //页码
        size: 10 //每页页码
      },
      fullrefund: [], // 全额退款
      GradeList: [], // 退款等级
      ReasonList: [], //退款原因
      RefundTypeList: [], //退款类型
      chargebackList: [],
      chargebackEdit: {},
      ChargebackformEdit: {},
      RequetrefundShows: true,
      RequetrefundShowsEdit: false,
      // RefundModeList: [], //退款方式
      chargebackEditotherShow: true,
      // 退款下拉数据
      refundReasonIds: "", //退款原因id
      refundReasonNames: "",
      refundTypeIds: "", //退款类型ID
      refundGradeIds: "", //退款等级ID
      refundGradeNames: "",
      cakeWhereIds: "", //蛋糕去向ID
      cakeWhereNames: "",
      //异常工单 ---------------------------------------------------------------------------------------------------
      abnormalIndex: -1, // 异常工单
      abnormalStatus: "",
      abnorStatus: "",
      abnormalEdit: {},
      // 图片
      dialogImageUrl: "",
      dialogVisible: false,

      abnormalChannelList: [],
      abnormalmethod: [],
      abnormalEditShow: false,
      abnormalShow: true,
      abnormalother: true,
      abnormalFrom: {
        cityId: "",
        page: 1, //页码
        size: 10, //每页页码
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformNo: "", //第三方平台单号
        phone: "", //手机号
        handleState: "", // 处理状态
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        responsibleDepartment: "", //责任部门
        departmentErrorType: "" //失误类型
      },
      abnormalList: [],
      Launchdate: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate2: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate3: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate5: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate6: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate7: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate8: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      Launchdate9: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      deptNamedamag: "",
      deptNameComplaint: "",
      deptNameabnormal: "",
      deptNameunsubscribe: "",
      deptNamechargeback: "",
      deptNameLossreport: "",
      deptNameworkorder: "",
      //异常申请退款
      AbnormalRefundVisible: false,
      complaintsList,
      currType: ''
    }
  },


  computed : {
    ...mapGetters(['permission'])
  },
  mounted () {
    this.filterTags()
    this.department() //责任部门
    this.cakeWhere() //蛋糕去向
    this.provisionsOperation() //备款状态
    this.CompensationMethodList() // 赔偿方式
    this.fullRefundList() // 全额退款
    this.refundGradeList() // 退款等级
    this.refundReasonList()
    this.getApprovalStatus()
    this.getctiy()
    this.getHandleState() //处理状态
    getResponsibleDepartmentErrorTree().then(res => {
      this.options = res.data
      this.options.map((item, idnex) => {
        // console.log(item.value,item.children)
        item.children.map((items, index) => {
          items.label = `${item.label}-${items.label}`
          items.value = `${item.value}:${items.value}`
        })
      })
    })
    window.addEventListener("keydown", this.keyupEnter)
  },
  watch: {
    dialogVisible () {
      if (this.dialogVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter)
      } else {
        window.addEventListener("keydown", this.keyupEnter)
      }
    },
    AbnormalRefundVisible () {
      if (this.AbnormalRefundVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter)
      } else {
        window.addEventListener("keydown", this.keyupEnter)
      }
    },
    AbnormalnotRefundVisible () {
      if (this.AbnormalnotRefundVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter)
      } else {
        window.addEventListener("keydown", this.keyupEnter)
      }
    },
    damageEditShow () {
      if (this.damageEditShow == true) {
        window.removeEventListener("keydown", this.keyupEnter)
      } else {
        window.addEventListener("keydown", this.keyupEnter)
      }
    },
    abnormalEditShow () {
      if (this.abnormalEditShow == true) {
        window.removeEventListener("keydown", this.keyupEnter)
      } else {
        window.addEventListener("keydown", this.keyupEnter)
      }
    },
    RequetrefundShowsEdit () {
      if (this.RequetrefundShowsEdit == true) {
        window.removeEventListener("keydown", this.keyupEnter)
      } else {
        window.addEventListener("keydown", this.keyupEnter)
      }
    }
  },
  destroyed () {
    window.removeEventListener("keydown", this.keyDown, false)
  },
  methods: {
    handImgShow () {
      this.isImgShow = false
    },
    handBigPhoto (src) {
      this.src = src
      this.isImgShow = true
    },
    changeExtJsonProblem (list) {
      if (!list) {
        return
      }
      return JSON.parse(list).img
    },
    getcomplaint () {
      relationtype({ 'code': 'complaint_grade' }).then(res => {
        this.relationtype = res.data.data
      })
      // 获取投诉字典
    },
    //  共用选择多图片
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    // 异常工单添加
    handabnormalSuccess (response) {
      this.singAbnormalForm.pics.push({
        url: response.data
      })
    },
    // 异常工单删除
    beforeabnormalRemove (index) {
      this.singAbnormalForm.pics.map((item, ids) => {
        if (item.uid == index.uid) {
          this.singAbnormalForm.pics.splice(ids, 1)
        }
      })
      // this.singAbnormalForm.pics.splice(index,1);
    },

    // 异常工单事件
    changeAbnormalEdit (row, formName) {
      this.headleAbnormaldetils(row, formName)
      this.handlerEditabnormal(this.abnormalEdit)
    },
    // 简单操作摁钮
    simpleOperationbutton (sabberIndex, string) {
      if (string == 'abnormalEdit') {
        // 异常工单
        this.abnormalEdit.handleState = sabberIndex
        this.handlerSaveabnormal(this.abnormalEdit, 'abnormalEdit')
      }
    },
    isproduction (row) {
      return row.isProduction ? '是' : '否'
    },
    changePayNum (row) {
      return row.goodsPrice / 100
    },
    changeErrorType (row) {
      return `${row.responsibleDepartmentName}~${row.departmentErrorTypeName}`
    },
    
    // 选择框回车失焦
    selectBlur (e) {
      if (e.keyCode == 13) {
        if (this.currType == '催单工单') {
          this.$refs["deptNameRef"].blur()
          this.$refs["reminderTypeRef"].blur()
        } else if (this.currType == '备款工单') {
          this.$refs["deptNameRef"].blur()
          this.$refs["damagedformRef"].blur()
          this.$refs["provisionsStatusRef"].blur()
          this.$refs["cakeWhereaboutsRef"].blur()
        } else if (this.currType == '投诉工单') {
          this.$refs["deptNameRef"].blur()
          this.$refs["handleStateRef"].blur()
          this.$refs["responsibleDepartmentRef1"].blur()
          this.$refs["departmentErrorTypeRef1"].blur()
        } else if (this.currType == '问题工单') {
          this.$refs["deptNameRef"].blur()
          this.$refs["handleStateRef"].blur()
          this.$refs["responsibleDepartmentRef"].blur()
          this.$refs["departmentErrorTypeRef"].blur()
        } else if (this.currType == '异常工单') {
          this.$refs["deptNameRef"].blur()
          this.$refs["handleStateRef"].blur()
          this.$refs["responsibleDepartmentRef"].blur()
          this.$refs["departmentErrorTypeRef"].blur()
        } else if (this.currType == '异订工单') {
          this.$refs["deptNameRef"].blur()
        } else if (this.currType == '退款工单') {
          this.$refs["deptNameRef"].blur()
          this.$refs["approvalPassRef"].blur()
        } else if (this.currType == '报损工单') {
          this.$refs["deptNameRef"].blur()
        } else if (this.currType == '快乐超时申诉') {
          this.$refs["deptNameRef"].blur()
        }
        e.returnValue = false
      }
    },

    // 回车事件
    keyupEnter (e) {
      if (e.keyCode == 13) {
        if (this.currType == '催单工单') {
          // 催单
          this.$refs.reminder && this.$refs.reminder.handleFilterReminders()
        } else if (this.currType == '备款工单') {
          // 备款工单
          this.handleFilterReserve(this.Launchdate2)
        } else if (this.currType == '投诉工单') {
          // 投诉
          this.$refs.complaint && this.$refs.complaint.handleFiltercomplaint()
        } else if (this.currType == '问题工单') {
          // 问题
          this.$refs.problem && this.$refs.problem.handleFilterproblem()
        } else if (this.currType == '异常工单') {
          // 异常工单
          this.handleFilterabnormal(this.Launchdate5)
        } else if (this.currType == '退订工单') {
          // 退订
          this.handleFifterunsubscribe(this.Launchdate6)
        } else if (this.currType == '退款工单') {
          // 退款
          this.handleterFifterRefund(this.Launchdate7)
        } else if (this.currType == '报损工单') {
          // 报损
          this.handleFifterDamaged(this.Launchdate8)
        } else if (this.currType == '快乐超时申诉') {
          // 工单
          this.handleFilterwork(this.Launchdate9)
        }
      }
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated () {
      window.addEventListener("keydown", this.keyupEnter)
    },
    deactivated () {
      window.removeEventListener("keydown", this.keyupEnter)
    },
    getctiy () {
      deptdepts("").then(res => {
        res.data.data.unshift({
          id: 0,
          deptName: "全国"
        })
        this.cityList = res.data.data
      })
    },
    handleCitydamag (data) {
      if (data) {
        this.deptNamedamag = data.label
        this.damagedform.cityId = data.value
      } else {
        this.damagedform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content
        this.deptNamedamag = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content
      }
    },
    handleCityabnormal (data) {
      if (data) {
        this.deptNameabnormal = data.label
        this.abnormalFrom.cityId = data.value
      } else {
        this.abnormalFrom.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content
        this.deptNameabnormal = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content
      }
    },
    handleCityunsubscribe (data) {
      if (data) {
        this.deptNameunsubscribe = data.label
        this.unsubscribeform.cityId = data.value
      } else {
        this.unsubscribeform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content
        this.deptNameunsubscribe = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content
      }
    },
    handleCitychargeback (data) {
      if (data) {
        this.deptNamechargeback = data.label
        this.chargebackform.cityId = data.value
      } else {
        this.chargebackform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content
        this.deptNamechargeback = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content
      }
    },
    handleCityLossreport (data) {
      if (data) {
        this.deptNameLossreport = data.label
        this.Lossreportform.cityId = data.value
      } else {
        this.Lossreportform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content
        this.deptNameLossreport = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content
      }
    },
    handleCityworkorder (data) {
      if (data) {
        this.deptNameworkorder = data.label
        this.workorderform.cityId = data.value
      } else {
        this.workorderform.cityId = JSON.parse(
          window.localStorage.getItem("saber-areaId")
        ).content
        this.deptNameworkorder = JSON.parse(
          window.localStorage.getItem("saber-areaname")
        ).content
      }
    },
    // 切换tabs
    handleTabs (item,index) {
        this.currType = item.name
        this.tagViewCount[this.currType]++
      if (this.currType == '备款工单') {
        // 备款状态
        this.getReserveOrderList() //备款工单列表
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          })
          this.deptNamedamag = res.data.data[0].deptName
          this.damagedform.cityId = res.data.data[0].id
          this.cityList = res.data.data
        })
      } else if (this.currType == '异常工单') {
        this.getabnormalList() //异常工单
        this.getComplaintLevel() //投诉等级
        this.getComplaintChannel() //投诉渠道
        this.getHandleState() //处理状态
        this.getAbnormalChannelList() // 等级
        this.abnormalFrom.departmentErrorType = ""
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          })
          this.deptNameabnormal = res.data.data[0].deptName
          this.abnormalFrom.cityId = res.data.data[0].id
          this.cityList = res.data.data
        })
      } else if (this.currType == '推定工单') {
        this.getunsubscribeList() //退定工单
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          })
          this.deptNameunsubscribe = res.data.data[0].deptName
          this.unsubscribeform.cityId = res.data.data[0].id
          this.cityList = res.data.data
        })
      } else if (this.currType == '退款工单') {
        this.getabchargebackList() //退款工单
        this.getRefundModeList()
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          })
          this.deptNamechargeback = res.data.data[0].deptName
          this.chargebackform.cityId = res.data.data[0].id
          this.cityList = res.data.data
        })
      } else if (this.currType == '报损工单') {
        this.getLossreport() //报损工单查询
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          })
          this.deptNameLossreport = res.data.data[0].deptName
          this.Lossreportform.cityId = res.data.data[0].id
          this.cityList = res.data.data
        })
      } else if (this.currType == '快乐超时申诉') {
        this.getOrderList() //快乐工单查询
        deptdepts("").then(res => {
          res.data.data.unshift({
            id: 0,
            deptName: "全国"
          })
          this.deptNameworkorder = res.data.data[0].deptName
          this.workorderform.cityId = res.data.data[0].id
          this.cityList = res.data.data
        })
      }
    },
    // 公共模块start---------------------------------------------------------------------------------
    getApprovalStatus () {
      //审核状态
      getApprovalList("").then(response => {
        this.ApprovalStatus = response.data.data
      })
    },
    getRefundModeList () {
      getRefundModeList().then(res => {
        this.RefundModeList = res.data.data
      })
    },
    getAbnormalChannelList () {
      //异常
      AbnormalChannelList("").then(response => {
        this.abnormalChannelList = response.data.data
      })
    },
    async department () {
      // ****责任部门
      const response = await ResponsibleDepartmentList()
      this.departmentList = response.data.data
    },
    initBindStripeTap (data) {
      this.departmentTypeList = []
      RefundTypeList({
        name: data
      }).then(response => {
        this.departmentTypeList = response.data.data
      })
    },
    getdepartmentErrorTypeIds (data) {
      this.departmentErrorTypeIds = data.value
      this.departmentErrorTypeNames = data.lable
    },
    getHandleState () {
      // 投诉状态处理
      getHandleStateList("").then(response => {
        this.dealstatusList = response.data.data
      })
    },
    getComplaintLevel () {
      //投诉等级列表
      getComplaintLevelList("").then(response => {
        this.ComplaintLevelList = response.data.data
      })
    },
    getComplaintChannel () {
      //投诉渠道列表
      getComplaintChannelList("").then(response => {
        this.ComplaintChannelList = response.data.data
      })
    },
    getRadio () { },
    cakeWhere () {
      // ****蛋糕去向
      CakeWhereaboutsList("").then(response => {
        this.cakewherelist = response.data.data
      })
    },

    provisionsOperation () {
      // **** 备款工单 备款状态
      ProvisionsOperationList("").then(response => {
        this.provisionsOperationList = response.data.data
      })
    },
    CompensationMethodList () {
      // ****备款状态
      CompensationMethod("").then(response => {
        this.compensationList = response.data.data
      })
    },
    fullRefundList () {
      // ****全额退款
      FullRefundList("").then(response => {
        this.fullrefund = response.data.data
      })
    },
    refundGradeList () {
      // 退款等级
      RefundGradeList("").then(response => {
        this.GradeList = response.data.data
      })
    },
    handleCloseAbnormal (done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.handelDialogReset()
          done()
        })
        .catch(() => { })
    },
    handleCloseAbnormalnotRefund (done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.handelDialogResetnot()
          done()
        })
        .catch(() => { })
    },

    refundReasonList () {
      // 退款原因：
      RefundReasonList("").then(response => {
        this.ReasonList = response.data.data
      })
    },
    // initBindStripeTap(data) {
    //   this.departmentTypeList = [];
    //   RefundTypeList({
    //     name: data
    //   }).then(response => {
    //     this.departmentTypeList = response.data.data;
    //   })

    // },
    handlerefundReason (item) {
      if (item) {
        this.refundReasonIds = item.value
        this.chargebackEdit.refundType = ""
        RefundTypeList({
          name: item.label
        }).then(response => {
          this.RefundTypeList = response.data.data
        })
      } else {
        this.$message({
          type: "warning",
          message: "请先选择退款原因!"
        })
        return false
      }
    },
    handlerefundGrade (data) {
      this.refundGradeIds = data
    },
    handleCakeWhere (data) {
      this.cakeWhereIds = data.value
    },

    //备款模块 start-------------------------------------------------------------------------------------
    getReserveOrderList () {
      //备款模块列表
      ReserveOrderList(this.damagedform).then(response => {
        this.damagedList = response.data.data.rows
        this.damagetotal = response.data.data.total
        this.damagedList.map(item => {
          this.damageformPersonName = item.personDeptName
        })
        this.damagedialogStatus = "create"
        this.damageEditShow = false
        this.damagelistindex = "-1"
        this.damageShow = true
        this.Logdamageshow = true
        // this.$refs.damagemain.scrollTop = 0;
      })
    },
    headReserveDetils (row, formName,) {
      this.showComplaintEdit = true
      // 备款详情进入
      this.damagedialogStatus = "update"
      this.damageStatus = "create"
      this.damageformEdit = row
      this.showEdit = []
      // this.damagelistindex = index;
      this.damageEditShow = false
      this.damageShow = true
      this.Logdamageshow = true
      this.damageformPersonName = row.personDeptName
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
    },
    handlerEditdamage (row) {
      this.damageStatus = "update"
      //// 备款编辑
      this.showEdit = row
      this.damageEditShow = true
      this.damageShow = false
      this.Logdamageshow = false
    },
    // 取消摁钮
    handlerdamageCancel (item, formName) {
      console.log(item)
      this.damageStatus = "create"
      this.damageEditShow = false
      this.damageShow = true
      this.Logdamageshow = true
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
    },
    getdamageformPersonDept (data) {
      this.damageformPersonDept = data.value
      this.damageformPersonName = data.label
    },
    handlerSavedamage (item, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (item.personLiable == "") {
            this.$message({
              message: "责任人不能为空",
              type: "warning"
            })
            return false
          } else if (item.provisionsContent == "") {
            this.$message({
              message: "备款内容不能为空",
              type: "warning"
            })
            return false
          } else if (item.provisionsStatus != "1") {
            if (item.offsetNo == "") {
              this.$message({
                message: "抵用单号不能为空",
                type: "warning"
              })
              return false
            }
          }
          const itemsave = {
            id: item.id,
            orderDetailId: item.orderDetailId,
            personDept:
              this.damageformPersonDept == ""
                ? item.personDept
                : this.damageformPersonDept,
            personLiable: item.personLiable,
            cakeWhereabouts: item.cakeWhereabouts,
            provisionsContent: item.provisionsContent,
            offsetNo: item.offsetNo,
            cityId: item.cityId,
            skuCode: item.skuCode
          }
          // 备款保存提交
          this.$confirm("确定修改好备款工单信息了吗,是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              updateWorkOrder(itemsave).then(() => {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                })
                this.damagedialogStatus = "create"
                this.getReserveOrderList()
                this.showComplaintEdit = false  // 显示弹框变量
                this.damageEditShow = false
                this.damageShow = true
                this.Logdamageshow = true
              })
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消修改"
              })
              return
              // this.damagedialogStatus = "create";
              // this.getReserveOrderList();
            })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    handleFilterReserve (times) {
      //备款列表查询
      this.damagedform.page = 1
      if (times) {
        this.damagedform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString()
        this.damagedform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString()
      }
      var time1 = Date.parse(this.damagedform.workOrderStartTime)
      var time2 = Date.parse(this.damagedform.workOrderEndTime)
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        })
      } else {
        this.damagedform.page = 1
        this.getReserveOrderList()
      }
    },
    handlerLogdamage (item) {
      this.$refs.orderLogDialog.show({orderId: item.orderId})
    },

    // 退订模块---------------
    getunsubscribeList () {
      UnsubscribePage(this.unsubscribeform).then(response => {
        this.unsubscribeList = response.data.data.rows
        this.total = response.data.data.total
      })
      //退订工单列表
      //
    },
    handleFifterunsubscribe (times) {
      //退订工单列表查询
      this.unsubscribeform.page = 1
      if (times) {
        this.unsubscribeform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString()
        this.unsubscribeform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString()
      }
      var time1 = Date.parse(this.unsubscribeform.workOrderStartTime)
      var time2 = Date.parse(this.unsubscribeform.workOrderEndTime)
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        })
      } else {
        this.getunsubscribeList()
      }
    },
    getLossreport () {
      getWorkOrderLossPage(this.Lossreportform).then(response => {
        this.Lossreport = response.data.data.rows
        this.total = response.data.data.total
      })
    },
    handleFifterDamaged (times) {
      this.Lossreportform.page = 1
      if (times) {
        this.Lossreportform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString()
        this.Lossreportform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString()
      }
      var time1 = Date.parse(this.Lossreportform.workOrderStartTime)
      var time2 = Date.parse(this.Lossreportform.workOrderEndTime)
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        })
      } else {
        this.getLossreport()
      }
    },
    // 异常工单-----------------------------------------------------------------------------
    getabnormalList () {
      //异常工单列表
      // console.log(this.abnormalError)
      this.abnormalFrom['responsibleDepartmentErrors'] = this.abnormalError
      getWorkOrderAbnormalPage(this.abnormalFrom).then(response => {
        response.data.data.rows.map(item => {
          if (item.compensationMethod) {
            item.compensationMethod = item.compensationMethod.split(",")
          }
        })
        this.abnormalList = response.data.data.rows
        this.total = response.data.data.total
        this.abnormalStatus = "created"
        this.abnormalEditShow = false
        this.abnormalIndex = "-1"
        this.abnormalShow = true
        // this.$refs.abnormalFromMain.scrollTop = 0;
      })
      // abnormalList
    },
    handleFilterabnormal (times) {
      //异常工单查询
      this.abnormalFrom.page = 1
      this.abnormalFrom.responsibleDepartment = this.responsibleDepartmentOtherIds
      if (times) {
        this.abnormalFrom.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString()
        this.abnormalFrom.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString()
      }
      var time1 = Date.parse(this.abnormalFrom.workOrderStartTime)
      var time2 = Date.parse(this.abnormalFrom.workOrderEndTime)
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        })
      } else {
        this.getabnormalList()
      }
    },
    headleAbnormaldetils (row, formName) {
      this.exceptionEditing = row.responsibleDepartmentError.split(',')
      console.log(row.responsibleDepartmentError.split(','), '异常订单')
      let arr = []
      if (row.extJson) {
        JSON.parse(row.extJson).img.map(item => {
          let obj = {}
          obj['url'] = item
          arr.push(obj)
        })
        this.singAbnormalForm.pics = arr
      } else {
        this.singAbnormalForm.pics = []
      }

      this.showComplaintEdit = true
      // 异常工单详情进入
      // console.log(row,'异常工单详情进入')
      this.abnormalStatus = "update"
      this.abnorStatus = "create"
      this.abnormalEdit = row
      // this.abnormalShow = [];
      // this.abnormalIndex = index;
      this.abnormalEditShow = false
      this.abnormalShow = true
      this.abnormalother = true
      // this.$refs[formName].resetFields();

      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
    },
    handlerEditabnormal (row) {
      // 异常工单修改
      this.showComplaintEdit = true
      this.abnorStatus = "update"
      this.abnormalShow = row
      this.abnormalEditShow = true
      this.abnormalShow = false
      this.abnormalother = false
    },
    handlerabnormalCancel (item, formName) {
      this.abnorStatus = "create"
      this.abnormalEditShow = false
      this.abnormalShow = true
      this.abnormalother = true
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
    },
    handlerSaveabnormal (item, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (item.phone == "") {
            this.$message({
              type: "warning",
              message: "手机号不能为空"
            })
            return false
          } else if (item.complaintContent == "") {
            this.$message({
              type: "warning",
              message: "投诉内容不能为空"
            })
            return false
          } else if (item.processingResults == "") {
            this.$message({
              type: "warning",
              message: "处理结果不能为空"
            })
            return false
          } else {
            let arr = []
            this.singAbnormalForm.pics.map((item, index) => {
              arr.push(item.url)
            })
            const Saveabnormal = {
              id: item.id,
              responsibleDepartmentError: this.exceptionEditing.join(',') || null,  // 异常订单
              orderId: item.orderId,
              personLiable: item.personLiable, //			责任人
              phone: item.phone, //		手机号
              platformNo: item.platformNo, //		第三方平台单号
              responsibleDepartment:
                this.responsibleDepartmentIds == ""
                  ? item.responsibleDepartment
                  : this.responsibleDepartmentIds, //		责任部门 1:客户责任 2:配送部 3:生产部 4:客服部 5:运营中心 6:系统责任
              departmentErrorType:
                this.departmentErrorTypeIds == ""
                  ? item.departmentErrorType
                  : this.departmentErrorTypeIds, //		部门失误类型
              complaintLevel: item.complaintLevel, //			投诉等级
              abnormalChannel: item.abnormalChannel, //异常渠道
              abnormalReason: item.abnormalReason, //异常原因
              refundAmount: item.refundAmount, //退款金额
              damages: item.damages, //赔偿金
              abnormalContent: item.abnormalContent, //异常内容
              processingResults: item.processingResults, //处理结果
              handleState: item.handleState, //处理状态
              extJson: JSON.stringify({ 'img': arr })  // 异常工单列表
            }
            // 异常工单修改提交保存
            this.$confirm("确定修改好该异常工单信息了吗, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                updateWorkOrderAbnormal(Saveabnormal).then(() => {
                  this.$message({
                    type: "success",
                    message: "保存成功"
                  })
                  this.showComplaintEdit = false
                  this.abnormalStatus = "created"
                  this.getabnormalList()
                  this.abnormalEditShow = false
                  this.abnormalShow = true
                  this.responsibleDepartmentIds = ''
                  this.departmentErrorTypeIds = ''
                })
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消修改"
                })
              })
          }
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    handlerLogabnormal (item) {
      this.$refs.orderLogDialog.show({orderId: item.orderId})
    },

    // 转异常配送
    returnAbnormal (item) {
      returnAbnormal({
        id: item.id,
        responsibleDepartmentError: this.exceptionEditing.join(',') || null,  // 异常订单
        orderId: item.orderId,
        personLiable: item.personLiable, //			责任人
        phone: item.phone, //		手机号
        platformNo: item.platformNo, //		第三方平台单号
        responsibleDepartment: this.responsibleDepartmentIds == "" ? item.responsibleDepartment : this.responsibleDepartmentIds, //		责任部门 1:客户责任 2:配送部 3:生产部 4:客服部 5:运营中心 6:系统责任
        departmentErrorType: this.departmentErrorTypeIds == "" ? item.departmentErrorType : this.departmentErrorTypeIds, //		部门失误类型
        complaintLevel: item.complaintLevel, //			投诉等级
        abnormalChannel: item.abnormalChannel, //异常渠道
        abnormalReason: item.abnormalReason, //异常原因
        refundAmount: item.refundAmount, //退款金额
        damages: item.damages, //赔偿金
        abnormalContent: item.abnormalContent, //异常内容
        processingResults: item.processingResults, //处理结果
        handleState: item.handleState, //处理状态
      }).then(response => {
        this.$message({
          type: "success",
          message: "修改成功!"
        })
        this.LogList = response.data.data
      })
    },

    //退款start-----------------------------------------------------------------------------
    headleChargeback (row, formName) {
      this.showComplaintEdit = true
      //退款详情
      this.chargebackStatus = "update"
      this.Editrefund = "create"
      this.chargebackEdit = row
      this.cakeCompensatePrice = row.cakeCompensatePrice
      // this.chargebackIndex = index;

      this.chargebackEditotherShow = true
      this.RequetrefundShows = true
      this.RequetrefundShowsEdit = false
      // this.$refs[formName].resetFields();
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
    },
    getabchargebackList () {
      //退款列表
      WorkOrderRefundPage(this.chargebackform).then(response => {
        this.chargebackList = response.data.data.rows
        this.total = response.data.data.total
        this.chargebackIndex = "-1"
        this.chargebackStatus = "create"
        this.RequetrefundShows = true
        this.RequetrefundShowsEdit = false
        // this.$refs.refundmain.scrollTop = 0;
      })
    },
    handlePictureCardPreview (file) {
      //图片放大
      this.dialogImageUrl = file
      this.dialogVisible = true
    },
    handleterFifterRefund (times) {
      //退款查询
      this.chargebackform.page = 1
      if (times) {
        this.chargebackform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString()
        this.chargebackform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString()
      }
      var time1 = Date.parse(this.chargebackform.workOrderStartTime)
      var time2 = Date.parse(this.chargebackform.workOrderEndTime)
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        })
      } else {
        this.getabchargebackList()
      }
    },
    strToJson (str) {
      try {
        let json = JSON.parse(str)
        return json
      } catch (e) {
        return str
      }
    },
    handlerLogrefund (item) {
      // 退款日志
      this.$refs.orderLogDialog.show({orderId: item.orderId})
    },
    handlerEditrefund (row) {
      this.Editrefund = "update"
      // this.imageUrl = row.refundCode;
      // console.log(this.imageUrl,'this.imageUrl')
      //退款详情编辑
      this.RequetrefundShows = false
      this.RequetrefundShowsEdit = true
      this.chargebackEditotherShow = false
      this.refundReasonNames = row.refundReasonName
      this.refundGradeNames = row.refundGradeName
      this.cakeWhereNames = row.cakeWhereaboutsName

      RefundTypeList({// 查询原因类型
        name: row.refundReasonName
      }).then(response => {
        this.RefundTypeList = response.data.data
      })
    },
    handlerefundCancel (item, formName) {
      this.Editrefund = "create"
      this.RequetrefundShows = true
      this.RequetrefundShowsEdit = false
      this.chargebackEditotherShow = true
      // this.$refs[formName].resetFields();
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
    },
    handlerabnormalrefund (item) {
      if (item.handleState == "1" || item.handleState == "4") {
        this.$message({
          type: "warning",
          message: "只有结案状态才能申请退款!"
        })
        return false
      } else {
        this.AbnormalRefundVisible = true
        // this.$confirm("确定申请退款,是否继续?", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning"
        //   })
        //   .then(() => {
        //     workOrderAbnormalLaunchRefund({
        //       workOrderAbnormalId: item.id
        //     }).then(
        //       () => {
        //         this.$message({
        //           type: "success",
        //           message: "申请退款成功!"
        //         });
        //         this.getabnormalList();
        //       }
        //     );
        //   })
        //   .catch(() => {
        //     this.$message({
        //       type: "info",
        //       message: "已取消申请退款"
        //     })
        //   });
      }
    },
    //异常工单 退款不退货
    handlerabnormalnotrefund (item) {
      if (item.handleState == "1" || item.handleState == "4") {
        this.$message({
          type: "warning",
          message: "只有结案状态才能申请退款不退货!"
        })
        return false
      } else {
        this.AbnormalnotRefundVisible = true
      }
    },

    acTiveArrStringFun (obj) {
      var arr = []
      if (obj != null && obj.length != 0) {
        for (var i = 0; i < obj.length; i++) {
          arr.push(obj[i])
        }
      }
      return arr.toString()
    },
    // headlerefundMode() {
    //   this.$notify({
    //     title: "警告",
    //     message: "该操作需点编辑按钮，才可进行赔偿方式选择",
    //     type: "warning"
    //   });
    // },
    headlecompensationMethod (item, goodsPrice) {
      console.log(goodsPrice, "goodsPrice")
      if (item == 1) {
        this.cakeCompensatePrice = goodsPrice
      } else if (item == 2) {
        this.cakeCompensatePrice = goodsPrice / 2
      } else if (item == 6) {
        this.cakeCompensatePrice = 0
      }
    },
    handlerSaverefund (item, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var refundMoneys = ""
          if (item.refundMode == 1) {
            refundMoneys = item.refundMoney
          }
          if (item.refundMode == 2) {
            var cakePrice = this.cakeCompensatePrice
            let array1 = [
              item.sincerityGold * 100,
              cakePrice * 100,
              item.giveGiftPrice * 100,
              item.giveCakePrice * 100
            ]
            const reducer = (accumulator, currentValue) =>
              accumulator + currentValue
            if (item.compensationMethod == 1) {
              refundMoneys = array1.reduce(reducer).toFixed(2) //退款金额
            } else if (item.compensationMethod == 2) {
              refundMoneys = array1.reduce(reducer).toFixed(2) //退���金额
            } else {
              refundMoneys = array1.reduce(reducer).toFixed(2) //退款金额
            }
          }

          if (item.refundType == "") {
            this.$message({
              type: "warning",
              message: "退款类型类型不能为空!"
            })
            return false
          } else if (item.applyReason == "") {
            this.$message({
              type: "warning",
              message: "申请原因不能为空!"
            })
            return false
          } else if (refundMoneys == "") {
            this.$message({
              type: "warning",
              message: "退款金额不能为空!"
            })
            return false
          } else if (item.store == "") {
            this.$message({
              type: "warning",
              message: "门店不能为空!"
            })
            return false
          } else {
            const Saverefund = {
              id: item.id,
              orderId: item.orderId,
              refundReason:
                this.refundReasonIds == ""
                  ? item.refundReason
                  : this.refundReasonIds, //退款原因
              refundType: item.refundType, // 退款类型
              refundGrade:
                this.refundGradeIds == ""
                  ? item.refundGrade
                  : this.refundGradeIds, // 退款等级
              refundMode: item.refundMode, // 退款方式
              refundMoney: refundMoneys, //退款金额
              approvalPass: item.approvalPass,
              compensationMethod: item.compensationMethod, //赔偿方式
              sincerityGold: item.sincerityGold, //诚意金
              cakeCompensatePrice: this.cakeCompensatePrice, //蛋糕金额
              giveCakePrice: item.giveCakePrice, //赠送的蛋糕价格
              giveGiftPrice: item.giveGiftPrice, //赠送的礼品价格
              applyReason: item.applyReason, //申请原
              store: item.store,
              refundCode: item.refundCode
            }
            // 退款详情保存
            console.log(Saverefund, "Saverefund", this.refundGradeIds)
            this.$confirm("确定修改好该退款工单信息了吗, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                updateWorkOrderRefund(Saverefund).then(() => {
                  this.$message({
                    type: "success",
                    message: "修改成功!"
                  })
                  this.showComplaintEdit = false
                  this.getabchargebackList()
                  this.chargebackStatus = "create"
                  this.RequetrefundShows = true
                  this.RequetrefundShowsEdit = false
                })
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消修改"
                })
              })
          }
        }
      })
    },

    handlerRequetrefund (item) {
      // 申请退款
      this.$confirm("确定申请退款,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          getApplyRefund({
            id: item.id,
            orderId: item.orderId
          }).then(() => {
            this.$message({
              type: "success",
              message: "申请退款成功!"
            })
            this.showComplaintEdit = false
            this.chargebackStatus = "create"
            this.getabchargebackList()
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消申请退款"
          })
        })
    },
    handlerApproved (item) {
      // 审批通过
      this.$confirm("确定审批通过,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ApprovalPass({
            id: item.id,
            orderId: item.orderId
          }).then(() => {
            this.$message({
              type: "success",
              message: "已审批通过!"
            })
            this.showComplaintEdit = false
            this.getabchargebackList()
            this.chargebackStatus = "create"
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审批通过"
          })
        })
    },
    handlerNotapproved (item) {
      this.$prompt("请输入不通过原因", "审批不通过", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          ApprovalNotPass({
            id: item.id,
            orderId: item.orderId,
            notPassReason: value
          }).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            })
            this.showComplaintEdit = false
            this.getabchargebackList()
            this.chargebackStatus = "create"
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          })
        })
      // 审批不通过
    },
    handleAvatarSuccess (res) {
      //退款二维码

      this.chargebackEdit.refundCode = res.data

      // console.log(res.data, this.chargebackEdit, "erdddd");
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    // beforeAvatarUpload(file) {
    //   //退款二维码上传限制
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传头像图片只能是 JPG 格式 与 png格式!")
        return false
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
        return false
      }
    },
    //快乐工单查询
    getOrderList () {
      getWorkOrderQueryList(this.workorderform).then(response => {
        this.workorderlist = response.data.data
        // console.log(this.workorderlist, this.workorderlist);
        // this.total = response.data.data.total;
      })
    },
    handleFilterwork (times) {
      this.workorderform.page = 1
      if (times) {
        this.workorderform.workOrderStartTime = this.dayjs(times[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString()
        this.workorderform.workOrderEndTime = this.dayjs(times[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString()
      }
      var time1 = Date.parse(this.workorderform.workOrderStartTime)
      var time2 = Date.parse(this.workorderform.workOrderEndTime)
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        })
      } else {
        this.getOrderList()
      }
    },
    handelDialogReset () {
      this.showComplaintEdit = false
      this.AbnormalRefundVisible = false
      this.abnormalShow = true
      this.abnormalEditShow = false
      this.abnormalStatus = "created"
      this.getabnormalList()
    },
    handelDialogResetnot () {
      this.showComplaintEdit = false
      this.AbnormalnotRefundVisible = false
      this.abnormalShow = true
      this.abnormalEditShow = false
      this.abnormalStatus = "created"
      this.getabnormalList()
    },

    getcomplaintLevelClass (complaintLevel) {
      if (complaintLevel > 3) {
        return 'danger'
      }
      if (complaintLevel > 2) {
        return 'warning'
      }
      return 'info'
    },
    handleReject(data) {
      this.$refs.rejectDialog.show(data)
    },
    handleRejectSuccess() {
      getWorkOrderAbnormalPage({xmbzNo: this.abnormalEdit.xmbzNo}).then(res => {
        if (res.data && res.data.data && res.data.data.rows && res.data.data.rows.length) {
          this.abnormalEdit = res.data.data.rows[0]
          this.showComplaintEdit = false
          this.getabnormalList()
        }
      })
    },
    // 根据权限过滤
    filterTags() {
      this.initTags = this.initTags.filter(item => {
        return this.permission[item.code]
      })
      this.currType = this.initTags[0] ? this.initTags[0].name : ''
      this.tagViewCount.hasOwnProperty(this.currType) && this.tagViewCount[this.currType]++
    },
    // 退款工单排序
    handleRefundTableSort(col) {
      const map = {
        'descending': 'desc',
      }
      this.chargebackform['sort'] = col.prop
      this.chargebackform['order'] = map[col.order]
      this.getabchargebackList()
    },
    // 退款工单催单
    headleChargebackRemind(item) {
      workReminder({id: item.id}).then(res => {
        this.$message({
          type: "success",
          message: "催办成功!"
        })
        this.getabchargebackList()
      })
    }
  }
};
</script>
<style lang='scss' scoped>
.work-order-page {
  td {
    height: 70px !important;
  }
}
.photoWallboard {
  .showExplain {
    width: 20%;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.cascaderSend {
  position: relative;
  // width: 100px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  min-height: 40px;
  cursor: pointer;
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    margin: 0 5px;
    align-items: center;
    min-width: 100px;
    flex-wrap: wrap;
    li {
      display: flex;
      justify-content: space-around;
      align-items: center;
      list-style-type: none;
      margin: 0;
      padding: 0;
      background: #f4f4f5;
      color: #909399;
      padding: 0 10px;
      // margin-right: 10px;
      margin: 5px 10px 5px 0;
      i {
        margin-left: 20px;
      }
    }
  }
  .left-ban {
    position: absolute;
    left: 0;
    top: 40px;
    border: 1px solid #ccc;
    z-index: 100;
    background: #fff;
    width: 100px;
    box-sizing: border-box;
    border-right: none;
    p {
      cursor: pointer;
      text-indent: 10px;
      margin: 5px 0;
    }
    .right-ban {
      position: absolute;
      left: 99px;
      top: 0px;
      min-width: 300px;
      background: #fff;
      border: 1px solid #ccc;
      min-height: 400px;
      P {
        text-indent: 10px;
        margin: 5px 0;
      }
      .nomoreContent {
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cloaseAll {
        position: absolute;
        right: 14px;
        top: 5px;
        z-index: 101;
        font-size: 20px;
      }
    }
  }
}
.cascader {
  position: relative;
  // width: 100px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  padding: 0 10px;
  min-width: 150px;
  min-height: 33px;
  cursor: pointer;
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    margin: 0 5px;
    align-items: center;
    min-width: 100px;
    height: 40px;
    li {
      display: flex;
      justify-content: space-around;
      align-items: center;
      list-style-type: none;
      margin: 0;
      padding: 0;
      background: #f4f4f5;
      color: #909399;
      padding: 0 10px;
      margin-right: 10px;
      i {
        margin-left: 20px;
      }
    }
  }
  .left-ban {
    position: absolute;
    left: 0;
    top: 40px;
    border: 1px solid #ccc;
    z-index: 100;
    background: #fff;
    width: 100px;
    box-sizing: border-box;
    border-right: none;
    p {
      cursor: pointer;
      text-indent: 10px;
      margin: 5px 0;
    }
    .right-ban {
      position: absolute;
      left: 99px;
      top: 0px;
      min-width: 300px;
      background: #fff;
      border: 1px solid #ccc;
      min-height: 400px;
      P {
        text-indent: 10px;
        margin: 5px 0;
      }
      .nomoreContent {
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cloaseAll {
        position: absolute;
        right: 14px;
        top: 5px;
        z-index: 101;
        font-size: 20px;
      }
    }
  }
}
body {
  font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
/* .el-form-item {
    margin-bottom: 10px !important;
  }
 */
.showEditShow {
  display: flex;
  justify-content: flex-end;
  //  el-button{
  //    margin-right: 10px;
  //  }
}
.refundmodeytips {
  padding: 0 10px;
}

.el-timeline-item {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.app-container {
  width: 100%;
  box-sizing: border-box;

  .compensationMethod {
    padding-left: 40px;

    .el-form-item__label {
      text-align: left;
    }
  }

  .complainmain {
    .el-form-item {
      margin-bottom: 20px !important;
    }

    .el-form-item__label:before {
      content: '*';
      color: #f56c6c;
      margin-right: 4px;
    }
  }

  .refundCode {
    width: 40px;
    height: 40px;
    text-align: middle;
  }

  .grade {
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
    font-style: normal;
  }

  .red {
    color: #ff0000;
  }

  .tablist {
    display: flex;
    border-bottom: 1px solid #ddd;

    .name {
      padding: 0 10px;
      text-align: center;
      color: #333;
      font-size: 18px;
      line-height: 32px;
      cursor: pointer;

      &.active {
        color: #43a0ff;
        border-bottom: 1px solid #43a0ff;
      }

      &:hover {
        color: #43a0ff;
      }
    }
  }

  .workorder {
    padding: 20px;

    .filter_container {
      display: block !important;

      .demo-form-inline {
        display: block !important;
      }
    }

    .work_list {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #606266;
      transition: 0.3s;
      padding: 10px 0;
      margin-top: 12px;
      position: relative;

      .nodata {
        text-align: center;
        color: #909399;
        line-height: 100px;
      }

      .credittype {
        width: 0;
        height: 0;
        float: right;
        font-size: xx-small;
        border-top: 60px solid #ffbc00;
        border-left: 60px solid transparent;
        position: absolute;
        top: 0;
        right: 0;

        .tips {
          text-align: center;
          margin: auto;
          position: absolute;
          display: inline-block;
          width: 50px;
          right: 0;
          top: -50px;
          color: #fff;
          transform-origin: bottom center;
          transform: rotate(45deg);
          font-size: 12px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }

      .line {
        padding: 0 10px;
        line-height: 32px;
        color: #606266 !important;
        font-weight: 400 !important;

        p {
          display: flex;
          padding: 0;
          margin: 0;
        }

        em {
          font-style: normal;
          padding: 0 5px;
        }
      }

      .order-num {
        display: inline-block;
        position: relative;
        margin: 0 20px 10px 0;
        line-height: 32px;
        background: #585a6e;
        color: #fff;
        text-align: center;

        span {
          position: relative;
          z-index: 9;
          font-size: 20px;
        }

        i {
          display: block;
          width: 0;
          height: 0;
          border: 17px solid;
          border-color: transparent transparent transparent #585a6e;
          position: absolute;
          top: 0;
          right: -34px;
        }
      }

      .work_lists {
        display: flex;
        justify-content: space-between;

        .line {
          p {
            display: flex;
          }

          em {
            font-style: normal;
            padding: 0 5px;
          }
        }
      }
    }
  }

  p {
    margin: 0;
    padding: 0;
  }

  .lows {
    display: flex;
  }

  .buttontips {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
  }

  .flex {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: auto;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }

  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
}
.table-cell-class-name {
  padding: 0 !important;
  font-size: 12px !important;
}
.header-row-class-name {
  font-size: 12px !important;
}
</style>
